web-dev-qa-db-fra.com

Comment empêcher la soumission de la valeur du champ de saisie du formulaire HTML s'il est vide

J'ai un formulaire HTML avec des champs de saisie. Certaines des entrées peuvent être vides, c’est-à-dire que la valeur est "".

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

En ce moment, lorsque le champ commentary n'est pas défini, il apparaît dans l'URL de soumission, comme suit: &commentary=

Comment puis-je supprimer les entrées vides de l'URL de soumission? Ainsi, lorsque l'entrée commentary est vide, elle n'est pas transmise du tout.

Merci beaucoup.

Mettre à jour

Grâce à minitech answer, j'ai pu résoudre le problème. Le code JavaScript est ci-dessous:

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

La seule raison pour laquelle j'ai préfixé le nom de champ avec "empty_" est que IE transmet quand même un nom vide dans l'URL.

javascripthtmlhtml-formhtml-form-post
34
nonezumi

Autant que je sache, cela ne peut être fait que par JavaScript. Par conséquent, si vous comptez sur cette fonctionnalité, vous devez vous restructurer. De toute façon, l’idée est de supprimer l’attribut name des entrées que vous ne voulez pas inclure:

jQuery:

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

Non jQuery:

var myForm = document.getElementById('my-form-id');

myForm.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 = '';
        }
    }
});

Vous voudrez peut-être aussi réinitialiser le formulaire ultérieurement, si vous utilisez un écouteur et que vous annulez.

39
Ry-

Vous ne voulez probablement pas faire correspondre les boutons radio. Et si le formulaire contient des sélections, vous devrez aussi les faire correspondre.

Avec jQuery, vous pouvez utiliser quelque chose comme ceci:

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

Au lieu d'utiliser une entrée de type submit-, utilisez une entrée de type button- pour la soumission du formulaire. Le gestionnaire JavaScript pour l'entrée de type button- doit appeler la méthode submit() du formulaire après avoir vérifié que le commentaire est non-vide. Vous devez également avertir l'utilisateur de son erreur (mieux avec un texte rouge sur la page plutôt que la fenêtre contextuelle produite par alert()).

N'oubliez pas que vous ne devez pas utiliser uniquement sur la validation des entrées côté client, bien qu'il soit toujours possible d'envoyer le formulaire à partir d'une page modifiée ou directement via HTTP.

3
Adam Zalcman

Merci @Ryan

C’est ma solution complète pour cela . J'utilise Jersey et @BeanParam et cela résout le problème des entrées "" & 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
ASH