jQuery validation not working after coming back from Thickbox display

Question

Hi, I am using Thickbox 3.1, jquery-1.3.2.min.js and jquery.validate.js.

similar to the validation not working problem, JQuery validations are not working in my case.

I have a form that gets validated before submitting, and on submit I am calling a preview page. This preview page is thickbox pop-up display with options to submit or edit. If I click on Edit, I come back to form page. I am trying to re-validate the form and show the preview again but both these are not working. If I am not validating the form second time, then I am able to see the preview page again. But this is not correct, I want to validate every time I edit the form.

I am adding the code snippet below:

Any help or suggestion is appreciated. Thanks in advance.

Regards: Qayyum

<form class="standard" action="<%=formAction%>" method="post" name="registerCard" id="registerCard">
        <fieldset>
            <legend>Personal Details</legend>
            <div>
                <label for="firstName" >First Name</label>
                <input name="firstName" type="text" id="firstName" value="" />
            </div>
            <div>
                <label for="lastName">Last Name</label>
                <input name="lastName" type="text" id="lastName" value="" />
            </div>
            <div>

                <a id="previewDetails" href='#' class="btn std right" onclick="javascript:preview()">Preview & Register</a>
            </div>
    </fieldset>
</form>

---

var url = '<%=previewAction%>?height=500&width=720';
function preview(){
   validate();
if ($("#registerCard").valid()) {
                    url = url + '&firstName='+escape(document.registerCard.firstName.value);
                    url = url + '&lastName='+escape(document.registerCard.lastName.value);
 tb_show("",url,false); 
}

---

validate method

function validate() {
  $('#registerCard').validate(
    {
      rules : {
        firstName : {
          required :function(){
              alert(" in validate 3");
              return true;
                },
          rangelength : [ 2, 20 ]
        },
        lastName : {
          required :true,
          rangelength : [ 2, 20 ]
        },
        spam :"required"
      }, // end rules
      messages : {
        firstName : {
          required :RP.I18n.getMessage("firstnamemessage"),
          rangelength :RP.I18n.getMessage("fieldRange", [
              "First Name", "2", "20" ])
        },
        lastName : {
          required :RP.I18n.getMessage("lastnamemessage"),
          rangelength :RP.I18n.getMessage("fieldRange", [
              "Last Name", "2", "20" ])
        }
      },//end messages
      errorPlacement : function(error, element) {
        if (element.is(":radio") || element.is(":checkbox")) {
          error.appendTo(element.parent());
        } else {
          error.insertAfter(element);
        }
      }
    }); //end error placement
}

---

The second form. I am showing read only fields and values. I have a Edit or submit button as follow:

< a id="save" href='#' class="btn std right" onclick="javascript:register()">Save</a> 
< a href="#" onclick="tb_remove()" class="btn std right">edit</a>

When I click on edit, it simply removes the thick box, and previous register form page appears. Now when i click preview again, the flow is stopped at $('#registerCard').validate (checked using alerts).

Why is it happening so? Do we need to reload JQuery validator, in order to use '$' ? If so, how to reload it?

Answer 1

I am not getting the problem if I use this technique.

assign a variable to validation

function validate() { validator = $('#registerCard').validate( ..................

And then put a check on total number of invalids

function preview(){ validate(); if (validator.numberOfInvalids() == 0) { tb_init('a.thickbox, area.thickbox, input.thickbox'); tb_show("",url,false);

Though I am able to re validate my form after coming back from thickbox view, I think this is not correct approach.

The question is if this object (validator) is able to find number of invalida, why not JQuery can access this methods directly. Or is it that I am missing something.