<script language=javascript>
function validateForm() {

	var divs  = $('.npt');

	var ctrl_vacios=true;

    if (valida_longitud() == false) {
        if (document.getElementById("ErrorValidacio") != null) {
            eliminarNode(document.getElementById("ErrorValidacio"));
        }
        var texteError = " (*) S'ha d'informar minim de 3-4 caracters";
		var btn = document.createElement("p");
		btn.setAttribute("id","ErrorValidacio");
		btn.style.color= "red";
		if (document.getElementById("ErrorValidacio") == '' || document.getElementById("ErrorValidacio") == null ){
				var t = document.createTextNode(texteError);
				btn.appendChild(t);
				var elem = document.getElementById('cercar_cataleg_producte');
				elem.appendChild(btn);
				return false;
		}
		else{ return false; }
    }
	for(var i=0;i<divs.length; i++){
		var elem = divs[i];
		if (elem.value.replace(/^\s+|\s+$/g,'') != '')
		{
			ctrl_vacios=false;
		}
	}
	if(ctrl_vacios){
        if (document.getElementById("ErrorValidacio") != null) {
            eliminarNode(document.getElementById("ErrorValidacio"));
        }
		var texteError = " (*) S'ha d'informar almenys un camp del formulari";
		var btn = document.createElement("p");
		btn.setAttribute("id","ErrorValidacio");
		btn.style.color= "red";
		if (document.getElementById("ErrorValidacio") == '' || document.getElementById("ErrorValidacio") == null ){
			var t = document.createTextNode(texteError);
			btn.appendChild(t);
			var elem = document.getElementById('cercar_cataleg_producte');
			elem.appendChild(btn);
			return false;
		}
		else{ return false; }
	}
}

function valida_longitud() {

    var divs  = $('.npt');

	for(var i=0;i<divs.length; i++){
                 divs[i].removeAttribute("style");
	}

	var divs  = $('.inputCodi');
	for(var i=0;i<divs.length; i++) {
		var elem = divs[i];
        elem = elem.value.replace(/^\s+|\s+$/g,'');
		if (elem.length < 3) {
			if (elem.length != 0) {
                divs[i].style.backgroundColor= '#ffcccc';
                divs[i].style.borderColor= "red";
			    return false;
			}
		}
        else { return true; }
	}
    var divs  = $('.inputDesc');
	for(var i=0;i<divs.length; i++) {
		var elem = divs[i];
        elem = elem.value.replace(/^\s+|\s+$/g,'');
		if (elem.length < 4 ) {
			if (elem.length != 0) {
                divs[i].style.backgroundColor= '#ffcccc';
                divs[i].style.borderColor= "red";
				return false;
			}
		}
        else { return true; }
    }
}

function eliminarNode(node) {
    node.parentNode.removeChild(node);
}
</script>

<style>

	.npt {
		text-align: left;
		padding: 6px 19px;
		font-size: .875em;
		border-radius: 4px;
		cursor: text;
		border: 1px solid #ccc !important;
	}

@media (min-width: 1200px) {
  .escalableNut {
   margin-top:30px;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  .escalableNut {
   margin-top:8px;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .escalableNut {
   margin-top:52px;
  }
}

@media (max-width: 767px) {
  .escalableNut {
   margin-top:30px;
  }
  /*afegir en sm i xs margins als cuadres i al botó!!*/
}
</style>

<h3>Catàleg de productes farmacèutics. Productes dietoterapèutics</h3>
<p>Ompliu els camps que vulgueu i feu clic a “Cercar”. Com més camps empleneu més exacte serà el resultat de la vostra petició.</p>
<form id="cercar_cataleg_producte" method="get" accept-charset="iso-8859-1" action="./resultats/">
	<input type="hidden" name="P_PAGINACIO" value="S"/>
	<input type="hidden" name="P_ELEMENT_INICIAL" value="0"/>
	<input type="hidden" name="P_MAX_PAGINES" value="15"/>
	<input type="hidden" name="P_NUM_ELEMENTS" value="40"/>
	<input type="hidden" name="P_CERCA" value="G"/>
	<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
	<br>
	<h5><strong>Producte</strong></h5>
	Poseu el codi o part del nom per triar per producte.<br/>
	(especialitat farmacèutica, efectes i accessoris, o nutrients).
	<br>
	<div style="margin-top:30px">
		<label>Codi</label>
		<br>
		<input type="text" name="P_CPRODUCTE" class="col-lg-12 col-md-12 col-sm-12 col-xs-12  npt" maxlength="8" value="">
	</div>
	<div style="margin-top:30px">
		<label>Descripció</label>
		<br>
		<input type="text" name="P_DPRODUCTE" class="col-lg-12 col-md-12 col-sm-12 col-xs-12  npt" maxlength="30" value="">
	</div>
	</div>
	<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
	<br>
	<h5><strong>Subgrup de nutrient</strong></h5>
	Poseu el codi o part del nom per triar per subgrup de nutrient.<br/><br/>
	<div class="escalableNut">
		<label>Codi</label>
		<br>
		<input type="text" name="P_CNUTRIENT" class="col-lg-12 col-md-12 col-sm-12 col-xs-12  npt" maxlength="8" value="">
	</div>
	<div style="margin-top:30px"">
		<label>Descripció</label>
		<br/>
		<input type="text" name="P_DNUTRIENT" class="col-lg-12 col-md-12 col-sm-12 col-xs-12  npt" maxlength="30" value="">
		<input class="btn bgRed white boto-modal-enviar pull-right" onclick="return validateForm();" value="Cerca" type="submit" style="width:90px;margin-top:15px;margin-left:15px;border:0px !important">
	</div>
	</div>

</form>