JQuery проверить входные данные не пустые перед отправкой

Question

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

Кто-нибудь может увидеть, что я делаю неправильно или есть более простой / более эффективный способ сделать это?

Спасибо

Ос

HTML:

<form action="#" method="post" class="signup-form">
    <div class="required">
        <label for="name">Name:</label>
        <input type="text" name="cm-name" id="name" value=""><br />
    </div>
    <div class="required">
        <label for="asd-asd">Email:</label>
        <input type="text" name="cm-asd" id="asd-asd" value="">
        <span class="btn"><input type="submit" name="submit" value="" id="signup"></span>
    </div>          
</form>

JS:

// Validate form fields in Sign up form 
$(".signup-form").submit(function(){
    var isFormValid = true;
    $(".signup-form .required input").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(this).parent().removeClass("highlight");
        }
    });
    if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
    return isFormValid;
});

Answer 1

Спасибо за ответы, однако я обнаружил, что причина, по которой я получаю сообщение об ошибке, заключается в том, что кнопка отправки не имеет значения, т.е. значение = "", поэтому он также проверял этот ввод. Чтобы устранить проблему, я должен был убедиться, что функция submit проверяет только «текстовые» типы ввода:

Новый JS:

// Validate form fields in Sign up form 
$(".signup-form").submit(function(){
    var isFormValid = true;
    $(".signup-form .required input:text").each(function(){ // Note the :text
        if ($.trim($(this).val()).length == 0){
            $(this).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(this).parent().removeClass("highlight");
        }
    });
    if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
    return isFormValid;
});

Answer 2

 $('#signup').click(function(event) {

 event.preventDefault(); 
//validate and if it is valid serialize the form
//else alert and return


var isFormValid = true;
    $(".signup-form .required input").each(function(index, value){
        if ($.trim($(value).val()).length == 0){
            $(value).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(value).parent().removeClass("highlight");
        }
    });

if(isFormValid ){
   $.post( 'validation.php', $('.signup-formt').serialize(), function( data ) {

  });
}else{
  alert("Please fill in all the required fields (highlighted in red)");
}
 });

Answer 3

$('input').each(function(index, obj){
    if($(obj).val().length === 0) {
        $(obj).addClass('error');
    }
});

Но я не помню, было бы obj или this .

Answer 4

.each запускает скрипт несколько раз.например, если у вас есть 3 пустых ввода, используемый вами скрипт добавляет класс .highlight 3 раза.если вы хотите, чтобы ваша страница была светлой и чистой, пошлите сценарий ниже.

check = function()
    {                
var empty = $(".signup-form .required input").filter(function() {
return this.value == ""; });//this checks if 1 or more inputs have no value
if(empty.length) {//to be applied if at least 1 input has no value
alert("Please fill in all the required fields (highlighted in red)");
$(".signup-form").addClass("highlight");
}else{
$(".signup-form").removeClass("highlight");
};}

Это предупредит сообщение ОДНАЖДЫ, если хотя бы один вход пуст.затем просто добавьте функцию onclick к вашему вводу ввода или любой кнопке, с которой вы хотите подтвердить форму.

<input type="submit" value="submit" onclick="check();">