Как запретить отправку значения поля ввода формы HTML, если оно пустое - PullRequest
Новая
       26

Как запретить отправку значения поля ввода формы HTML, если оно пустое

35 голосов
/ 06 ноября 2011

У меня есть HTML-форма с полями ввода.Некоторые из входных данных могут быть пустыми, т. Е. Значение равно "".

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

Только сейчас, когда поле commentary не установлено, оно отображается в URL-адресе отправки следующим образом: &commentary=

Как я могу удалить пустые входы из URL-адреса отправки, поэтому, когда вход commentary пуст, он вообще не будет передан.

Большое спасибо.

Обновление

Благодаря ответу minitech я смог решить эту проблему.Код JavaScript приведен ниже: 

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

Единственная причина, по которой я добавил префикс имени поля с «empty_», заключается в том, что IE все равно передает пустое имя в URL.

Ответы [ 4 ]

39 голосов
/ 06 ноября 2011

Насколько я знаю, это можно сделать только через JavaScript, поэтому, если вы полагаетесь на эту функциональность, вам необходимо провести реструктуризацию.В любом случае, идея состоит в том, чтобы удалить атрибут name из входных данных, которые вы не хотите включать:

jQuery: 

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

Нет 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 = '';
        }
    }
});

Вы также можете сбросить форму после этого, если вы используете слушателя и отмените.

4 голосов
/ 25 декабря 2013

Возможно, вы не хотите совпадать с переключателями. И если форма содержит селекты, вам также нужно будет сопоставить их.

С jQuery вы можете использовать что-то вроде этого: 

$('#form-id').submit(function() {
    $(this).find('input[type!="radio"][value=""],select:not(:has(option:selected[value!=""]))').attr('name', '');
});
3 голосов
/ 06 ноября 2011

Вместо использования ввода submit -типа используйте ввод типа button для отправки формы.Обработчик JavaScript для ввода button -типа должен вызывать метод submit() формы после проверки того, что комментарий не пуст.Вы также должны предупредить пользователя об ошибке (лучше с красным текстом на странице, а не с всплывающим окном, созданным alert()).

Помните, что вы не должны полагаться исключительно при проверке входных данных на стороне клиента, поскольку всегда можно отправить форму с измененной страницы или напрямую по HTTP.

0 голосов
/ 23 марта 2018

Спасибо @ Райан

Это мое полное решение для этого.Я использую Джерси и @BeanParam, и это решает проблему "" & нулевых входов 

$('#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);

        }
    });
});
...