Best way to validate fields and radio buttons with jquery?

Question

I have several text input fields in my page, and few radio buttons. Now I need to validate them at client side, before I send them to server side (having server side validation too).

I am validating text inputs using jquery and javascript, but now I am wondering is this really the best way to validate them?

And how is this going to work with radio buttons?

$('form').submit(function() {
    validateForm($(this))
    return false;
});

function validateForm(form) {
    var FirstName=form.find('[name=FirstName]').val();
    if (!FirstName) {
        alert('Etunimi puuttuu');
        return false;
    }
}

Use jquery validate plugin http://bassistance.de/jquery-plugins/jquery-plugin-validation/ :) — GillesC, Apr 27 '12 at 11:11
jQuery validate. The very best there is. When you absolutely, positively got to validate every field in the form... accept no substitute. — Rory McCrossan, Apr 27 '12 at 11:13
Are you validating any specific data or are you just making sure all the fields are not blank? and the same for the radio buttons? — Mark Walters, Apr 27 '12 at 11:15
So there is no point to do it by hand? What if I have to do it without any plugins? Not validating any data, just checking that fields arent empty. User need to choose one radio button, for payment method. — Arto, Apr 27 '12 at 11:17

score 1 · Accepted Answer · answered Apr 27 '12 at 11:44

If you are just validating to ensure the fields aren't blank then i would add a class to all text fields like so

<input type="text" id="Firstname" class="validate" />

then use Jquery to loop over all fields with a class of .validate and check whether any of them are blank. You can then choose how you alert the user.

$('.validate').each(function(){

   if($(this).val().length === 0)
   {
      alert($(this).attr('id')+ " is blank");
   }
});

for radio buttons you could check like so

if($('#myRadio').not(':checked'))
{
   alert('Radio not checked');
}

by testing the :checked pseudo selector

Or similarly grouping sets of checkboxes together by assigning a class and then looping over them to test that at least one has been checked.

Thanks, that was the way I want to do it, I know that there are validator plugins on jquery, but I cant/want to use them, because I wanna learn plus it wont work very well on my project. — Arto, Apr 27 '12 at 21:00

score 0 · Answer 2 · edited May 23 '17 at 10:24

As others have already mentioned, the wheel has already been invented for a great validation tool. You can download, experiment, and learn from the documentation from the jQuery validation plugin.

You set up the rules within your mark-up and then when you call validate() it will execute all of the things you wanted validated and alert the user appropriately. You can even add custom validation if it doesn't suit your particular situation.

For an example of how easy it would be to use the jQuery Validate plug-in with radio buttons, see this post.

To validate whether a radio button is checked without jquery validate, the following should work:

//submit initiated
if ($("[name=paymentMethod]:checked").size() ==0) {
    alert("Select an option");
}

And seen here.

Best way to validate fields and radio buttons with jquery?

2 Answers2