jquery validation onclick

Question

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.

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
– Sparky, Commented Oct 20, 2014 at 15:21

Enrique · Accepted Answer · 2012-11-01 10:19:39Z

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;
    }
});

answered Nov 1, 2012 at 10:19

Enrique

991 silver badge1 bronze badge

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

3 Comments

Barmar Over a year ago

How is that significantly different from the code in his original question, which didn't work? What do tabs have to do with this?

jtheman Over a year ago

@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.

Sparky Over a year ago

@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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 3, 2012 at 13:08

gdoron

151k59 gold badges302 silver badges376 bronze badges

2 Comments

jtheman Over a year ago

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?

HPWD Over a year ago

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'",   }, }

jtheman · Accepted Answer · 2012-02-10 08:25:48Z

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 
      } 
   }); 
});

answered Feb 10, 2012 at 8:25

jtheman

7,5013 gold badges32 silver badges40 bronze badges

1 Comment

Anselme Over a year ago

I tryed it but I have got the following return from the console Uncaught TypeError: Object [object Object] has no method 'valid' both javascript file are well declared before.. (<script type="text/javascript" src="ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/…> <script type="text/javascript" src="ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/…> )

Peter · Accepted Answer · 2012-02-03 13:09:00Z

3

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

$(document).ready(function(){
    $('#form').validate();
});

answered Feb 3, 2012 at 13:09

Peter

1,2114 gold badges17 silver badges33 bronze badges

1 Comment

jtheman Over a year ago

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?

Collectives™ on Stack Overflow

jquery validation onclick

4 Answers 4

3 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related