проверка формы в jquery без использования плагина

Question

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

Это мой HTML форма -

<form action="" method="post" class="a"> 
    Name : <input type="text" class="text" name="name" id="name" /> <br/> 
    Address : <input type="text" class="text" name="address" id="address" /> <br/> 
    Email: <input type="text" class="text" name="email" id="email" /> <br/> 

    <input type="button" id="submit" value="Submit" name="submit" /> 
</form> 

Если пользователь представить эту форму без заполнения каких-либо элемента формы, то мне нужно, чтобы отобразить 3 сообщения об ошибках в одном окне предупреждения. Нравится это

Name can not be empty. 
Address can not be empty. 
email can not be empty. 

Если только одно или два поля остаются пустыми, мне необходимо управлять сообщением об ошибке в соответствии с ситуацией.

Здесь я пробовал его с помощью jquery. Но окно предупреждения отображается один за другим.

Мой JQuery -

$('#submit').on('click', function() { 
    valid = true; 
    if ($('#name').val() == '') { 
     alert ("please enter your name"); 
     valid = false; 
    } 

    if ($('#address').val() == '') { 
     alert ("please enter your address"); 
     valid = false; 
    }  
}); 

Это FIDDEL

Может ли тело сказать мне, как я могу понять это? Спасибо.

Answer 1

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

$('#submit').on('click', function() { 
    var valid = true, 
     message = ''; 

    $('form input').each(function() { 
     var $this = $(this); 

     if(!$this.val()) { 
      var inputName = $this.attr('name'); 
      valid = false; 
      message += 'Please enter your ' + inputName + '\n'; 
     } 
    }); 

    if(!valid) { 
     alert(message); 
    } 
}); 

Fiddle: http://jsfiddle.net/WF2J9/17/

Answer 2

Если вы хотите только 1 предупреждение появляться в то время, вам нужно проверить состояние valid для каждого условия:

$('#submit').on('click', function() { 
    valid = true; 

    if (valid && $('#name').val() == '') { 
     alert ("please enter your name"); 
     valid = false; 
    } 

    if (valid && $('#address').val() == '') { 
     alert ("please enter your address"); 
     valid = false; 
    }  

    return valid; 
}); 

Updated fiddle

Answer 3

попробовать следующее:

$('#submit').on('click', function() { 
    var valid = true, 
    errorMessage = ""; 

    if ($('#name').val() == '') { 
     errorMessage = "please enter your name \n"; 
     valid = false; 
    } 

    if ($('#address').val() == '') { 
     errorMessage += "please enter your address\n"; 
     valid = false; 
    }  

    if ($('#email').val() == '') { 
     errorMessage += "please enter your email\n"; 
     valid = false; 
    } 

    if(!valid && errorMessage.length > 0){ 
     alert(errorMessage); 
    } 
    }); 

работает скрипку здесь: http://jsfiddle.net/WF2J9/24/

я надеюсь, что это помогает.

Answer 4

Форма проверки:

Этот код предназначен для простой формы проверки с помощью jquery.you могут использовать эту функцию для проверки в вашей форме.

Благодаря

 <form action="" method="post" name="ContactForm" id="ContactForm1"> 
     <div id='message_post'></div> 
     <div class="input-group"> <span class="input-group-addon"></span> 
     <input type="text" name="fname" class="form-control" placeholder="First Name *"> 
     </div> 
     <div class="input-group"> <span class="input-group-addon"></span> 
     <input type="text" name="lname" required="required" class="form-control" placeholder="Last Name *"> 
     </div> 
     <div class="input-group"> <span class="input-group-addon"></span> 
     <input type="text" name="phone" required="required" class="form-control" placeholder="Phone (bh) *"> 
     </div> 
     <div class="input-group"> <span class="input-group-addon"></span> 
     <input type="text" name="email" required="required" class="form-control" placeholder="Email *"> 
     </div> 
     <div class="input-group"> <span class="input-group-addon"></span> 
     <textarea rows="5" name="message" required="required" class="form-control" placeholder="Message *"></textarea> 
     </div> 
     <div class="input-group form-buttons"> 
        <span class="input-group-btn"> 
     <input type="submit" id="btn" name="buttn" value="Send Message" class="btn btn-default"/><i class="fa fa-envelope"></i> 
     </span> 
     </div> 
     </form> 

     <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script> 
<script> 

// just for the demos, avoids form submit 

jQuery.validator.setDefaults({ 
    debug: true, 
    success: "valid" 
}); 
$("#ContactForm1").validate({ 
    rules: { 
      fname: "required", 
      lname: "required", 
      phone: "required", 
      email: { 
       required: true, 
       email: true 
      }, 

      message: "required", 

    } 
}); 
</script>