javascript - jquery validation by date on a not required field -
i have been working on of today , feel i'm stumped.
i found code validate field mm/dd/yyyy format not required. working 1 field. have multiple date fields not required if have in text field should date formatted mm/dd/yyyy. wish use datepicker client doesn't want it's validating data in text fields.
here script i'm using on form:
$(function() { $.validator.setdefaults({ errorclass: 'help-block', highlight: function(element) { $(element) .closest('.form-group') .addclass('has-error'); }, unhighlight: function(element) { $(element) .closest('.form-group') .removeclass('has-error'); }, errorplacement: function (error, element) { if (element.prop('type') === 'radio') { error.insertafter(element.parent()); } else { error.insertafter(element); } } }); $.validator.addmethod( "gooddate", function(value, element) { // put own logic here, (crappy) example return value.match(/(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)[0-9]{2}/); }, "please enter date in format mm/dd/yyyy." ); $.validator.addmethod('strongpassword', function(value, element) { return this.optional(element) || value.length >= 6 && /\d/.test(value) && /[a-z]/i.test(value); }, 'your password must @ least 6 characters long , contain @ least 1 number , 1 char\'.') $("#updateinprocess").validate({ rules: { interview: { gooddate: true, nowhitespace: true }, inp_slct_memo_recv: { gooddate: true, nowhitespace: true }, inp_job_offer_made: { gooddate: true, nowhitespace: true }, secpackage: { gooddate: true, nowhitespace: true }, interimsecgranted: { gooddate: true, nowhitespace: true }, interimsecdenied: { gooddate: true, nowhitespace: true }, fullsecgranted: { gooddate: true, nowhitespace: true }, medgranted: { gooddate: true, nowhitespace: true }, entranceonduty: { gooddate: true, nowhitespace: true } }, messages: { interview:{ required: "" }, inp_slct_memo_recv:{ required: "" }, inp_job_offer_made:{ required: "" }, secpackage:{ required: "" }, interimsecgranted:{ required: "" }, interimsecdenied:{ required: "" }, fullsecgranted:{ required: "" }, medgranted:{ required: "" }, entranceonduty:{ required: "" }, contractnumber: { required: 'please enter contract number.' } } }); }); now, works interview field doesn't catch other of fields when improper date entered. thought able duplicate values other names of text fields doesn't seem working.
here html form:
<div class="row"> <div class="col-xs-12"> <div class='row'> <div class='col-sm-4'> <div class='form-group'> <form class="form-horizontal" name="updateinprocess" id="updateinprocess" action="https://afghanistan.wmt.usaid.gov/pak_wmt/index.cfm/candidate/candidateinprocessupdate"> <input name="can_id" value="25" type="hidden"> <input name="the_can_id" value="25" type="hidden"> <label for="user_title">interview</label> <input class="form-control" id="interview" name="interview" value="02/13/2003" placeholder="mm/dd/yyyy" size="30" type="text" maxlength="45" /> </div> </div> <div class='col-sm-4'> <div class='form-group'> <label for="user_firstname">selection memo received</label> <input class="form-control" id="inp_slct_memo_recv" name="inp_slct_memo_recv" placeholder="mm/dd/yyyy" size="30" type="text" maxlength="45" value="01/02/2004" /> </div> </div> <div class='col-sm-4'> <div class='form-group'> <label for="user_lastname">job offer made</label> <input class="form-control" id="inp_job_offer_made" name="inp_job_offer_made" placeholder="mm/dd/yyyy" size="30" type="text" maxlength="45" value="" /> </div> </div> </div> </div> <div class="col-xs-12"> <div class='row'> <div class='col-sm-4'> <div class='form-group'> <label for="user_title">sec package submitted</label> <input class="form-control" id="secpackage" name="secpackage" placeholder="mm/dd/yyyy" size="30" type="text" maxlength="45" value="" /> </div> </div> <div class='col-sm-4'> <div class='form-group'> <label for="user_firstname">interim security granted</label> <input class="form-control" id="interimsecgranted" name="interimsecgranted" placeholder="mm/dd/yyyy" size="30" type="text" maxlength="45" value="01/02/2007" /> </div> </div> <div class='col-sm-4'> <div class='form-group'> <label for="user_lastname">interim security denied</label> <input class="form-control" id="interimsecdenied" name="interimsecdenied" placeholder="mm/dd/yyyy" size="30" type="text" maxlength="45" value="" /> </div> </div> </div> </div> <div class="col-xs-12"> <div class='row'> <div class='col-sm-4'> <div class='form-group'> <label for="user_title">full security granted</label> <input class="form-control" id="fullsecgranted" name="fullsecgranted" placeholder="mm/dd/yyyy" size="30" type="text" maxlength="45" value="" /> </div> </div> <div class='col-sm-4'> <div class='form-group'> <label for="user_firstname">med granted</label> <input class="form-control" id="medgranted" name="medgranted" placeholder="mm/dd/yyyy" size="30" type="text" maxlength="45" value="" /> </div> </div> <div class='col-sm-4'> <div class='form-group'> <label for="user_lastname">entrance on duty</label> <input class="form-control" id="entranceonduty" name="entranceonduty" placeholder="mm/dd/yyyy" size="30" type="text" maxlength="45" value="" /> </div> </div> </div> </div> <div class="col-xs-12"> <div class='row'> <div class='col-sm-12'> <div class='form-group'> </div> </div> </div> </div> <div class="col-xs-12"> <div class='row'> <div class='col-sm-12'> <div class='form-group'> </div> </div> </div> </div> </div> <div class="pull-left"> <input type="submit" id="savecandidate" class="btn btn-success" value="save candidate"> </div> </form> <div class="pull-right"> <div class="pull-right"> <a class="btn btn-danger" href="#delete" role="button" data-toggle="modal">delete candidate</a> <a class="btn btn-warning" href="#drop" role="button" data-toggle="modal">drop candidate</a> </div> </div> </div> i have double checked make sure calling proper named of input fields does't seem working.
jsfiddle example setup: here
your html botched form tags improperly nested inside & straddling div elements.
moving form tag outside of of div elements fixed issue.
demo: http://jsfiddle.net/cprswpfk/5/
you've written custom gooddate function these fields cannot left blank, building required it.
if these fields not required, have adjust custom method using this.optional(element)...
$.validator.addmethod("gooddate", function (value, element) { // put own logic here, (crappy) example return this.optional(element) || value.match(/(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)[0-9]{2}/); }, "please enter date in format mm/dd/yyyy."); demo 2: http://jsfiddle.net/cprswpfk/6/
Comments
Post a Comment