CODEWITHSUNDEEP
jqueryvalidation
Russell Parrott
Russell Parrott

Reputation: 903

JQuery form validation

What is the best JQuery way to ensure that all input fields with the attribute "required" are completed

Upvotes: 2

Views: 1835

Answers (10)

bula
bula

Reputation: 9419

valijate plugin might help you. it uses 'data-xxxx' attributes for the validations. here is form validation guide.

Upvotes: 0

suraj mahajan
suraj mahajan

Reputation: 870

Check this simple jQuery plugin

http://suraj-mahajan.github.io/Validate-In-Grid-Controls/

Upvotes: 0

user252566
user252566

Reputation: 141

Just add two attributes at the end of your input tags:
required="required" js-name="name_to_be_displayed"

<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" type="application/javascript">
$(function (){
    $("#submit").click(function (){
        $('input').each(function(index, value) {
            var attb = $(this).attr('required');
            var value = $(this).val();

            if (attb == "required" && value == "") {
                alert($(this).attr('js-name') + " " + 'value required');
                $(this).focus();
                return false;
            }
        });
    });
});
</script>
<form action="index.php" method="post" enctype="multipart/form-data" target="_self">
<label> Name:   
<input name="Name:" type="text" size="60" maxlength="60" required="required" js-name="Name" />
</label>
<br />
<label>Email:
<input name="Email:" type="email" value="" size="60" required="required" js-name="Email" />
</label>
<br />
<label>Phone:
<input name="Phone" type="text" size="60" required="required" js-name="Phone" /> 
</label>
<br />
<label>Country:
<input name="Country" type="text" size="60" required="required" js-name="Country" />
</label>
<br />
<input name="Submit" type="submit" id="submit" value="Submit" />
</form>

Upvotes: 0

user570605
user570605

Reputation: 768

You can also try bValidator plugin (http://code.google.com/p/bvalidator/) for form validation

Upvotes: 0

calumbrodie
calumbrodie

Reputation: 4792

There is also a plugin called 'valididty' that is worth a mention and is simpler to use IMO that the validation plugin.

http://validity.thatscaptaintoyou.com/

Upvotes: 0

Variant
Variant

Reputation: 17365

The best JQuery validation plugin is: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

(At least the one I use and feel most comfortable with)

Upvotes: 1

user284291
user284291

Reputation:

For reference : jQuery Validation

For Example : webreference

Upvotes: 0

oshirowanen
oshirowanen

Reputation: 15925

Try this:

http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/

Upvotes: 0

Jimmy Huang
Jimmy Huang

Reputation: 4312

You can try to use jquery validation plugin:

http://docs.jquery.com/Plugins/validation

Upvotes: 0

Andy E
Andy E

Reputation: 344527

Use the .filter() method to check the value of each and then check the length property of the result:

var incomplete = $("input[required]").filter(function () {
    return this.value === "";
});
if (incomplete.length) {
    alert("Please fill in all the required fields");
}

Note that an attribute named required will invalidate your HTML. data-required would be valid HTML5, however, or you could just give them all a class and use that as the selector (which would also be more efficient).

You could also use one of the validation plugins out there: http://google.com/search?q=jquery+validation.

Upvotes: 3

Related Questions