Monday, April 25, 2011

jquery validation plugin not working in modalbox

i am trying to validate fields in modalbox however its not working below is my validation code

$("#formapplication").validate({
rules: {
  tb_name:{ required: true },
  tb_url: {required: true},
  tb_tag: {required: true},
  tb_desc: {required: true},
  tb_catg: {required: true}
  },
messages:{
  tb_name:{ required: "Please Enter Full name" },
  tb_url: {required: "Please Enter URL"},
  tb_tag: {required: "Please Enter Tag."},
  tb_desc: {required: "Please Enter Description."},
  tb_catg: {required: "Please Select Category."}
  }
 });

jquery validation plugin support modalbox but its simple html i write on same page not calling using ajax any idea pelase help.

below is xhtml

<div id="submitapplication" style="display:none">
<form action="" id="formapplication" name="formapplication" method="post">
<div class="submitapplicationbox">
<label>Name<input type="text" name="tb_name" id="tb_name" /></label>
<label>Url<input type="text" name="tb_url" id="tb_url" /></label>
<label>Tags<input type="text" name="tb_tag" id="tb_tag" /></label>
<label>Category<select name="select" id="tb_catg">
  <option value=""></option>
  </select></label>
<label>Description
<textarea cols="" rows="" name="tb_desc" id="tb_desc" ></textarea></label>
</div>
<div class="twiteraccountinfobox">
<label>Name<input type="text" name="tb_twaccount" id="tb_twaccount" /></label>
<div style="margin-top:20px;"><input type="button" id="submitapp" value="Submit Application" /></div>
<div id="response" style="display:none;"></div>
</div>

From stackoverflow
  • Ah, first off, add a # to your form action so it's form action="#". The # doesn't fix it, but I have run into IE issues before without a hash in forms.

    Also, try adding a line underneath your validation:

    $("#formapplication").valid();
    
    Yasir : Thanks Steerpike acutally i was missing class required on all my input
    Steerpike : That's perculiar, as between your methodology and the documentation I had presumed that was intended behaviour. I assumed you were using the 'rules' option to bypass the class required
    Yasir : how i can use rules to bypass the class required ? would you please tell me i don't know i did't change rules but add required class to markup n it start woriking
  • i was missting class required on all my inputs that i am using for validation

    <input type="text" id="tb_name" class="required" />
    
    1. First, as Seb said, you need quotes around your field names.
    2. Second, as I understand the rules and messages hashes from the documentation, you need to refer to elements by the the name attribute, not the id attribute. So instead of "tb_catg": {required: true} I think you want "select": {required: true} since your HTML says <select name="select" id="tb_catg">

0 comments:

Post a Comment