7

I have an issue with the jquery validate plugin that doesn't make sense to me. Please can anyone see where my mistake is?

Here is my HTML:

<form id="form">
   <input type="text" name="name" class="required" />
   <input type="text" name="email" class="required email" />
</form>
<a id="link">Save</a>

Here is my JS

<script src="jquery 1.7.1"></script>
<script src="jquery.validate.1.9"></script>
<script>
    $('#link').click(function()
    {
        $('#form').validate();
        if ($('#form').valid()) // check if form is valid
        {
            // do some stuff
        }
        else 
        {
            // just show validation errors, dont post
        }
    });

</script>

The form never gets validated or at least the .valid() function always returns true but I can't see why? I used the validate plugin for years but not in this context.

1
  • Because the .validate() method needs to be called once on page load to initialize the plugin _before_ you can use the .valid()` method. In other words, pull .validate() out of the click handler.
    – Sparky
    Oct 20, 2014 at 15:21

4 Answers 4

9

If you have a link and need to validate a form. Also this function goes to next tab in UI Tabs validating each tab with a form in each tab.

$('.next-tab').click(function() { 
    //if form is valid
    if ($("#frmSignup").valid()) {
        //activate next tab
        $('#signuptabs').tabs('enable', $(this).attr("rel"));
        //switch to next tab
        $tabs.tabs('select', $(this).attr("rel"));
        return false;
    }
});
3
  • 1
    How is that significantly different from the code in his original question, which didn't work? What do tabs have to do with this?
    – Barmar
    Nov 1, 2012 at 10:49
  • @Barmar I agree, can't really see why this answer gets upvoted as it has not much to do with my question. and no, I dont use tabs in this case.
    – jtheman
    Nov 1, 2012 at 14:16
  • 1
    @Barmar and jtheman, I agree this answer is not that great and doesn't deserve the up-votes, however, it's different than the OP's because the .validate() method has been properly removed from the click handler.
    – Sparky
    Oct 20, 2014 at 15:19
6

You are trying to attach an event to an element which isn't rendered yet

you have to use the onDOM ready

$(function() {
     $('#link').click(function(){
        $('#form').validate();
        if ($('#form').valid()) // check if form is valid
        {
            // do some stuff
        }
        else 
        {
            // just show validation errors, dont post
        }
    });
});

$(functionHandler) == $(document).ready(functionHandler);

Rule No.1: Always think, is the DOM must be rendered before that peice of code that you write, It's the most common mistake on this site...

This tip and many more you can read on the jquery tag on this site, read it

2
  • Thanks and SORRY, but I seem to have missed this in the code above, I tried to narrow down as much as possible. I already have onDOM ready in my working code. So unfortunately this doesn't help... Still no validation takes place. Is it that the form must be submitted before initial validation takes place?
    – jtheman
    Feb 3, 2012 at 13:43
  • How would you go about adding message and rules using this? For example, messages: { dd1: { required: "Please select an option from the list, if none are appropriate please select 'Other'", }, selectedFacility: { required: "Please select a facility from the list, if none are appropriate please select 'Organization Not Found'", }, }
    – HPWD
    Mar 30, 2015 at 19:38
4

Solved it for now. Now the validator does what I want. JS below, same HTML:

$(function() 
{ 
   $('#link').click(function() 
   { 
      if ($("input[name=name]").valid() && $("input[name=email]").valid()) 
      { 
         // do some stuff 
      } 
      else 
      { 
         // just show validation errors, dont post 
      } 
   }); 
});
1
3

You need to put your validation in an "on document ready"

$(document).ready(function(){
    $('#form').validate();
});
1
  • Thanks and SORRY, but I seem to have missed this in the code above, I tried to narrow down as much as possible. I already have onDOM ready in my working code. So unfortunately this doesn't help... Still no validation takes place. Is it that the form must be submitted before initial validation takes place?
    – jtheman
    Feb 3, 2012 at 14:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.