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


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 commentary el campo 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 el commentary la entrada está vacía, no se aprobaría en absoluto.

Muchas gracias.

Actualizar

Gracias a minitech respuesta, podría 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.


32
2017-11-06 18:58


origen


Respuestas:


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 name atributo 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.


37
2017-11-06 19:05



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', '');
});

3
2017-12-24 21:43



En lugar de usar un submittipo de entrada, use un buttontipo de entrada para el envío de formularios. El controlador de JavaScript para el buttontipo de entrada debe llamar al formulario submit() método después de verificar que el comentario no está vacío. También debe alertar al usuario de su error (mejor con un texto rojo en la página en lugar del pop-up producido por alert())

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


2
2017-11-06 19:02



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);

        }
    });
});

0
2018-03-23 15:32