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

This is my form:

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

If a user submits the form without filling any inputs then I need to display 3 error messages in single alert box. Like this

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

If only one or two fields remain empty, then I need to control error message according the situation.

Here I tried it using jQuery. But the alerts display in separate boxes:

My 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;
    }    
});

Here is a fiddle.

Can anybody tell me how can I figure this out? Thank you.

ninja · Accepted Answer · 2013-08-13 14:05:07Z

10

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/

answered Aug 13, 2013 at 14:05

ninja

2,2831 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TNK Over a year ago

Great. Thank you very much. One question, can I display an error if the email is not valid?

maverickosama92 Over a year ago

i copied ninja code and updated with email pattern check here: jsfiddle.net/WF2J9/22 courtesy @ninja :)

maverickosama92 · Accepted Answer · 2013-08-13 15:39:01Z

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.

edited Aug 13, 2013 at 15:39

answered Aug 13, 2013 at 14:07

maverickosama92

2,7252 gold badges24 silver badges38 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2013-08-13 14:00:26Z

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

answered Aug 13, 2013 at 14:00

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

1 Comment

TNK Over a year ago

thank for quick response. Using this code I can get only one error messsage.

Prince Bhatt · Accepted Answer · 2016-12-26 10:22:33Z

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>

Your code might be ok if the OP wanted to use a plugin but the OP did not want to use a plugin!

Collectives™ on Stack Overflow

Form validation in jQuery without using plugin

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related