jQuery按日期在非必填字段上进行验证

韦吉

我今天大部分时间都在努力,我感到很沮丧。

我发现了一些代码来验证一个字段是一个毫米/ dd / yyyy格式必需的。现在这是有效的,但仅适用于一个领域。我有多个不需要的日期字段,但是如果文本字段中包含某些内容,则该日期的格式应为mm / dd / yyyy。我希望我可以使用datepicker,但客户端不希望这样,所以这取决于验证文本字段中的数据。

这是我在表单上使用的脚本:

$(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 your own logic here, this is just a (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 a date in the 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 be at least 6 characters long and contain at least one number and one 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 a contract number.'
    }
}
  });

});

现在,这适用于采访字段,但是当输入不正确的日期时,它不会捕获其他任何字段。我以为我可以复制文本字段其他名称的值,但这似乎不起作用。

这是HTML表单:

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

我已仔细检查以确保我正在调用输入字段的正确名称,但它似乎没有用。

jsFiddle示例设置:此处

活泼的

您的HTML充满了form错误地嵌套在div元素内并跨越元素标记

form标签移到所有div元素之外可解决此问题。

演示:http : //jsfiddle.net/cprswpfk/5/


您已经编写了自定义goodDate函数,以使这些字段不能留为空白,从而可以有效地构建required其中。

如果这些字段不是必需的,那么你必须使用调整您的自定义方法this.optional(element)...

$.validator.addMethod("goodDate", function (value, element) {
    // put your own logic here, this is just a (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 a date in the format mm/dd/yyyy.");

演示2:http//jsfiddle.net/cprswpfk/6/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章