Проверка формы JQuery при нажатии кнопки «Отправить», проверить, что все поля ввода пусты, и показать, что ошибка innerHTML не работает?

Я пытаюсь создать проверку формы с помощью HTML и JQuery, чтобы убедиться, что все поля ввода не пусты при нажатии кнопки «Отправить». Если какое-либо из них пусто, кнопка «Отправить» не будет обрабатывать форму и изменит цвет пустых полей ввода на желтый и отобразит сообщение внизу формы (используя innerHTML в файле .

Это соответствующие HTML-коды:

<body>
<div id="div_main">
    <form action="process.html" method="POST">
        <div id="div_left">
    <p>Name:</p>
    <p>Age:</p>
    <p>Gender:</p>
    </div>
    <div id="div_right">
        <p><input type="text" id="name" name="name"></p>
        <p><input type="text" id="age" name="age"></p>
        <p><input type="text" id="gender" name="gender"></p>
    </div>
    <input type="submit" id="chksubmit" value="submit"/>
    <div id="divmessage"></div>
    </form>
</div>
</body>

И это мои соответствующие коды JQuery для выполнения проверки:

<script src="jquery-3.3.1.min.js"></script>
<script> 
$(document).ready(function(){
    $('#chksubmit').click(function(){
        if($('#name').val()==''){
            $('#name').css('background-color','yellow');
            $('#divmessage').append("Please enter Name.")
            success = false;
        }
    });

    $('#chksubmit').click(function(){
        if($('#age').val()==''){
            $('#age').css('background-color','yellow');
            $('#divmessage').append("<br>Please enter Age.")
            success = false;
        }
    });

    $('#chksubmit').click(function(){
        if($('#gender').val()==''){
            $('#gender').css('background-color','yellow');
            $('#divmessage').append("<br>Please enter Gender.")
            success = false;
        }
    });
});
</script>

Когда я нажимаю «Отправить» с пустыми полями ввода, форма по-прежнему проходит, а не останавливается. Я не могу понять, почему.


javascript html jquery css
person RealRiley    schedule 03.02.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проверьте приведенный ниже пример

$(document).ready(function() {
  $('#chksubmit').on("click", function(e) {
    //clean divmessage
    $('#divmessage').html("");
    //or use $("#div_main form input") to check all inputs
    $("#name, #age, #gender").each(function() {
      $(this).css('background-color', '');;
      if ($(this).val().replace(/\s+/g, " ").trim() == '') {
        $(this).css('background-color', 'yellow');
        success = false;
        $('#divmessage').append("<br>Please enter " + $(this).data("for"))
      }
    });
    e.preventDefault();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div_main">
  <form action="process.html" method="POST">
    <div id="div_left">
      <p>Name:</p>
      <p>Age:</p>
      <p>Gender:</p>
    </div>
    <div id="div_right">
      <p><input type="text" data-for="Name" id="name" name="name"></p>
      <p><input type="text" data-for="Age" id="age" name="age"></p>
      <p><input type="text" data-for="Gender" id="gender" name="gender"></p>
    </div>
    <input type="submit" id="chksubmit" value="submit" />
    <div id="divmessage"></div>
  </form>
</div>

person Mamdouh Saeed    schedule 03.02.2019
comment
Спасибо! Кажется, это работает, за исключением того, какова функция for в $(this).data(for))? Когда я пытаюсь применить предложенное вами исправление кода, пользователю предлагается ввести undefined вместо имени/пола/возраста. - person RealRiley; 03.02.2019
comment
Пожалуйста, смотрите HTML там есть data-for="Name" data-for="Age" data-for="Gender" - person Mamdouh Saeed; 03.02.2019