Member 14207176 Ответов: 2

После того, как библиотека jQuery форма проверки действий не звонить. Пожалуйста, проверьте и дайте комментарии о том, какая ошибка произошла в приведенном ниже коде

<html>
<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type='text/javascript' src='jquery.min.js'></script>
  <style>
  form label {
  display: inline-block;
  width: 100px;
}

form div {
  margin-bottom: 10px;
}

.error {
  color: red;
  margin-left: 5px;
}

label.error {
  display: inline;
}
</style>
</head>
<body>
<!-- First Form -->
<h2>Example 1:</h2>
<form id="first_form" method="post" action="res.php">
  <div>
    <label for="first_name">First Name:</label>
    <input type="text" id="first_name" name="first_name"></input>
  </div>
  <div>
    <label for="last_name">Last Name:</label>
    <input type="text" id="last_name" name="last_name"></input>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"></input>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"></input>
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>

<script>
$(document).ready(function() {

  $('#first_form').submit(function(e) {
    e.preventDefault();
    var first_name = $('#first_name').val();
    var last_name = $('#last_name').val();
    var email = $('#email').val();
    var password = $('#password').val();
    
    

    $(".error").remove();

    if (first_name.length < 1) {
      $('#first_name').after('<span class="error">This field is required</span>');
      
    }
    if (last_name.length < 1) {
      $('#last_name').after('<span class="error">This field is required</span>');
            
    }
    if (email.length < 1) {
      $('#email').after('<span class="error">This field is required</span>');
      
    } else {
      var regEx = /^[A-Za-z0-9_\-\.]+\@[A-Za-z0-9_\-\.]+\.[a-z]{2,3}$/;
      var validEmail = regEx.test(email);
      if (!validEmail) {
        $('#email').after('<span class="error">Enter a valid email</span>');
      }
    }
    if (password.length < 8) {
      $('#password').after('<span class="error">Password must be at least 8 characters long</span>');
      }
     
   
  });

});
</script>

</body>
</html>


Что я уже пробовал:

After jquery validation form action isn't call. Please check and give comments for what kind of error was occured in below code

Nirav Prabtani

Что такое ошибка, Вы проверили в консоли, проверив элемент ?

2 Ответов

Рейтинг:
2

Richard Deeming

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

Вам нужно изменить свой код таким образом, чтобы он предотвращал отправку формы только в том случае, если есть ошибки проверки. Если нет ошибок проверки, он должен разрешить отправку формы.

Например:

$(function() {
    $('#first_form').submit(function(e) {
        // e.preventDefault(); // Remove this line
        
        $("#first_form .error").remove();
        
        ... VALIDATION CODE HERE ...
        
        // If there are any errors, prevent the form from being submitted:
        if ($("#first_form .error").length) {
            e.preventDefault();
        }
    });
});

Лично я бы рекомендовал вместо этого переключиться на плагин проверки jQuery:
плагин проверки jQuery | проверка формы с помощью jQuery[^]

Или используйте встроенные атрибуты проверки формы:
Проверка данных формы - Learn web development | MDN[^]

Рейтинг:
1

Gerry Schmitz 

$('#first_form').submit(function(e) {
    e.preventDefault();
...
}

event.preventDefault() | документация по API jQuery[^]

Чтобы запустить событие отправки в первой форме на странице:
$( "form:first" ).submit();

.submit() | jQuery API документация[^]

Member 14207176

Привет Джерри,

Я попробовал этот код '$( "form:first" ).submit();' кроме того, после применения этого кода форма не проверяется и непосредственно вызывает параметр действия формы.

Пожалуйста, дайте мне хорошо работающий код. Я думаю, что какой-то код только для того, чтобы добавить в свой код проверки jquery. Я не знаю, что именно мне нужно.

Пожалуйста, проверьте и выполните мой код. Чтобы посоветовать мне, какая ошибка сделана в моем коде jquery.