CODEWITHSUNDEEP
jqueryformsvalidationalert
TNK
TNK

Reputation: 4323

Form validation in jQuery without using plugin

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.

Upvotes: 8

Views: 45746

Answers (4)

Prince Bhatt
Prince Bhatt

Reputation: 69

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>

Upvotes: 1

maverickosama92
maverickosama92

Reputation: 2725

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.

Upvotes: 4

ninja
ninja

Reputation: 2263

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/

Upvotes: 9

Rory McCrossan
Rory McCrossan

Reputation: 337570

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

Upvotes: 3

Related Questions