javascript - solo - validar contraseñas iguales html5

Cómo evitar enviar el valor del campo de entrada del formulario HTML si está vacío

Question

Tengo un formulario HTML con campos de entrada. Algunas de las entradas pueden estar vacías, es decir, el valor es "".

<input name="commentary" value="">

Justo ahora, cuando el campo de commentary no está configurado, aparece en la URL de envío como: &commentary=

Cómo puedo eliminar las entradas vacías de la url de envío, por lo que cuando la entrada de commentary está vacía, no se aprobará en absoluto.

Muchas gracias.

Actualizar

Gracias a la respuesta de minitech , pude resolverlo. El código de JavaScript está a continuación:

$(''#my-form-id'').submit(function() {
var commentary = $(''#commentary'').val();
if (commentary === undefined || commentary === "") {
$(''#commentary'').attr(''name'', ''empty_commentary'');
} else {
$(''#commentary'').attr(''name'', ''commentary'');
}
});

La única razón por la que tengo el nombre de campo prefijado con "empty_" es que IE pasa el nombre vacío en la URL de todos modos.

Answer 1

En lugar de usar una entrada de tipo submit , use un tipo de entrada de button para enviar el formulario. El controlador de JavaScript para la entrada de tipo de button debe llamar al método submit() del submit() después de verificar que el comentario no esté vacío. También debe advertir al usuario de su error (mejor con un texto rojo en la página en lugar de la ventana emergente producida por alert() ).

Recuerde que no debe confiar únicamente en la validación de entrada del lado del cliente, ya que siempre es posible enviar el formulario desde una página modificada o directamente en HTTP.

Answer 2

Esto solo se puede hacer a través de JavaScript, hasta donde yo sé, por lo que si confía en esta funcionalidad, necesita reestructurarla. La idea, de todos modos, es eliminar el atributo de name de las entradas que no desea incluir:

jQuery:

$(''#my-form-id'').submit(function () {
$(this)
.find(''input[name]'')
.filter(function () {
return !this.value;
})
.prop(''name'', '''');
});

No jQuery:

var myForm = document.getElementById(''my-form-id'');
myFrm.addEventListener(''submit'', function () {
var allInputs = myForm.getElementsByTagName(''input'');
for (var i = 0; i < allInputs.length; i++) {
var input = allInputs[i];
if (input.name && !input.value) {
input.name = '''';
}
}
});

Es posible que también desee restablecer el formulario después, si usa un oyente y cancela.

Answer 3

Gracias @Ryan

Esta es mi solución completa para esto. Uso Jersey y @BeanParam y esto soluciona el problema de las entradas "" y null

$(''#submitForm'').click(function() {
var url = "webapi/?";
var myForm = document.getElementById(''myFormId'');
var allInputs = myForm.getElementsByTagName(''input'');
for (var i = 0; i < allInputs.length; i++) {
var input = allInputs[i];
if (input.value != "" && input.name != "submitForm") {
url += input.name +''=''+input.value+''&'';
}
}
console.log(url);
$.ajax({
method : "GET",
url : url,
data : {
// data : "json",
// method: "GET"
},
success : function(data) {
console.log("Responce body from Server: /n" + JSON.stringify(data));
$("#responce").html("");
$("#responce").html(JSON.stringify(data));
},
error : function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
console.log(''Error: '' + errorThrown);
}
});
});

Answer 4

Probablemente no quiera hacer coincidir los botones de radio. Y si el formulario contiene select, también deberá hacer coincidirlos.

Con jQuery, puede usar algo como esto:

$(''#form-id'').submit(function() {
$(this).find(''input[type!="radio"][value=""],select:not(:has(option:selected[value!=""]))'').attr(''name'', '''');
});