Question

Hola mi inquietud es la siguiente:

Estoy trabajando con JSP y Servlet, y en el JSP tengo un formulario, lo que no se es como podría validar los campos antes de que me redireccione al Servlet. Para ello utilizo la siguiente función

function validar() {    
    if (document.formCP.txtNombre.value === "") {
        alert("El campo Nombre no debe estar vacio. -" + accion + "-");
        document.formCP.txtNombre.focus();
        return false;
    }

    if (document.formCP.txtDescripcion.value === "") {
        alert("El campo Descripción no debe estar vacio.");
        document.formCP.txtDescripcion.focus();
        return false;
    }

    if (document.formCP.cbxProveedor.value === "Ninguno") {
        alert("Debe seleccionar un proveedor.");
        document.formCP.cbxProveedor.focus();
        return false;
    }

    return true;
}

Donde formCP es el nombre de mi formulario y lo que sigue después del punto es el nombre de mi campo. Un inconveniente es que en mi formulario tengo 2 botones, guardar y eliminar, donde realiza las respectivas acciones en base de datos, por lo tanto quiero que valide los campos de acuerdo al botón que se le de clic.

Por lo tanto, use el evento onclick en cada botón, y sí hace las validaciones pero aunque estén mal envía los datos erróneos al Servlet. Entonces intente con el evento onsubmit, pero este me valida por igual todos los campos sin importar que boton seleccione.

No se si con esto alguien me pudiera ayudar.

Gracias.

Answer 1

Simplemente coloca required a los inputs del formulario:

<form id="formCP" action="TuServlet">
    <input type="text" id="txtNombre" required>
    <input type="text" id="txtDescripcion" required>
    <select id="cbxProveedor" required>
        <option value="1">Proveedor X</option>
        <option value="2">Proveedor Y</option>
        <option value="3">Proveedor Z</option>
    </select>
    <input type="submit" value="Registrar">
</form>

Si no se ingresan/eligen valores en el formulario, la validación será automática y no te mostrará los errores (no deje el campo vacío). Ahora, si esto no fuese suficiente, puedes validar además que los valores ingresados en las cajas de texto sigan un patrón, esto lo haces mediante el atributo patern, por ejemplo:

<input type="text" id="txtNombre" pattern="[a-zA-Z]$" required>

La caja de texto anterior validará que no se deje vacía y que además solo se ingresen letras minúsculas y mayúsculas, mas no números (ideal para nombres).

Si el usaurio hace todo bien, el formulario será marcado como válido y se enviará la info al Servlet (puedes también enviar info al servler por AJAX).

UPDATE

Para poner mensajes personalizados en caso falle la validación, usa setCustomValidity. Por ejemplo:

<input type="text" id="txtNomtbre"pattern="[a-zA-Z]$"  oninvalid="setCustomValidity('Por favor ingresa solo letras')" required/>

El código anterior mostrará el mensaje: "Por favor ingresa solo letras".

Demo: http://jsfiddle.net/gpaagyhp/