Form validation in jQuery without using plugin

Question

I want to perform client-side validation of a simple form using jQuery, but I can\'t use any plugins for validation. I want to display any error messages in a single alert

Answer 1

Loop through each input element in the form, and check if it has a value. If not append the error message to a string which you later alert out if valid is false.

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

form validation:

This code is provided for the simple form validation using jquery.you can use this for validation in your form.

Thanks

        <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>

Answer 3

If you only want 1 alert to appear at a time you need to check the state of valid for each condition:

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

try following:

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

working fiddle here: http://jsfiddle.net/WF2J9/24/

i hope it helps.