Validate multiple inputs on Submit

Question

Can anyone help I'm trying to validate multiple inputs to ensure that they aren't empty at the point I submit. And then add some text into #error.

My form looks like this :

<div class="span12">
        <form method="post" name="bdayInputFormMain" action="/bdayremind_maininput/" class="form-inline">
        {% csrf_token %}
                <input name="name" type="text" class="input-medium" placeholder="Name">
                <input name="dob" type="text" class="input-small datepicker" placeholder="Date of Birth">
                <input name="addr" type="text" class="input-xlarge" placeholder="Address">
                <button type="submit" class="btn">Update</button>
        </form>
</div>

Thanks,

user2033671 · Accepted Answer · 2013-04-08 20:10:25Z

1

Check out the documentation for .submit(). It is fairly easy to write your own validation method, or you can use a library like others have suggested.

http://jsfiddle.net/rwFDT/

$('form').submit(function(){
   var $emptyFields = $();
   $('form').find('input').each(
       function(){
              if($(this).val() == ""){
                   $emptyFields.push(this)
             }
        });
  if($emptyFields.length != 0){
    $('form').find('input').css("border","");
    $emptyFields.css("border", "1px solid red");
    $("#error").html("<b><i>This is my error message</i></b>");
    return false;
  }else{
    return true;
  }
});

answered Apr 8, 2013 at 20:10

user2033671

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

2 Comments

felix001 Over a year ago

Works well. However if I change the code to slide the error message in, how do I slide the rest of the page down ?

user2033671 Over a year ago

Try some things out, if you are still stuck ask a new question

ssube · Accepted Answer · 2013-04-08 20:30:22Z

0

This validation library, Parsley.js, looks pretty nice and may meet your needs.

edited Apr 8, 2013 at 20:30

ssube

48.4k10 gold badges107 silver badges144 bronze badges

answered Apr 8, 2013 at 19:56

Shibbir Ahmed

1,35013 silver badges21 bronze badges

Comments

Miguel Ángel Dávila Carrasco · Accepted Answer · 2013-04-08 20:41:31Z

0

Yeah! The jquery validation is one of the best validator for client. You should use required class for those field required.

See the doc http://docs.jquery.com/Plugins/Validation

Your form would look like this:

http://jsbin.com/elemad/3/edit

I hope it helps!

answered Apr 8, 2013 at 20:41

Miguel Ángel Dávila Carrasco

116 bronze badges

Collectives™ on Stack Overflow

Validate multiple inputs on Submit

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related