在非必填字段

时间:2015-10-02 20:06:20

标签: javascript jquery jquery-validate

我今天大部分时间都在努力工作,我觉得我很难过。

我找到了一些代码来验证字段是否为所需的mm / 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示例设置:here

2 个答案:

答案 0 :(得分:1)

你的HTML被cqlsh:test> copy test from stdin; [Use \. on a line by itself to end input] [copy] 1,abc,2 Bad Request: line 1:44 no viable alternative at input ',' (... c, b) VALUES ([abc],...) Aborting import at record #0 (line 1). Previously-inserted values still present. 0 rows imported in 7.982 seconds. cqlsh:test> copy test from stdin; [Use \. on a line by itself to end input] [copy] 1,2,abc [copy] \. 1 rows imported in 14.911 seconds. 标签错误地嵌套在内部&amp;跨越你的copy test (c, b, a) from stdin; [Use \. on a line by itself to end input] [copy] 1,abc,2 [copy] \. 1 rows imported in 5.727 seconds. 元素。

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

DEMO:http://jsfiddle.net/cprswpfk/5/

您已经编写了自定义form功能,因此不能将这些字段留空,从而有效地构建div

如果这些字段,则必须使用goodDate调整自定义方法...

required

DEMO 2:http://jsfiddle.net/cprswpfk/6/

答案 1 :(得分:0)

跳到笔的底部 实际上,我会使用JavaScript来实现这一目标。 &#39; /&#39;应位于第2和第5位,您的最后一个字符应位于9,如下: 01/34/6789(其中每个数字代表字符串中字符的位置)。

Get-Content

此外,您还应检查每个字段的值,以确保它们处于正确的范围内。您应该使用一个开关案例,因为您将有月份具有不同的天数。

上面的代码片段会检查每个值并返回一个警告,告诉用户日期是正确还是不正确。由于您不想显示任何正确的内容,因此您可以删除它们,并将其他值替换为&#39;返回false&#39;。完成的结果看起来像

的JavaScript

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
Button button1 = createButton(this);
layout.addView(button1);

public static Button createButton(Activity a) { 
Button b = new Button(a);
    b.setLayoutParams(layoutParams);
    b.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
                Intent intent = new Intent(a.class.this, MainActivity.class);
                startActivity(intent);
        }
    })
return b;
}

HTML

var str = "12/22/1989";
var dSeperator = str.charAt(2);
var mSeperator = str.charAt(5);
var checkLength = str.length;

if(dSeperator === '/' &&
mSeperator === '/' &&
checkLength === 10)
{alert('this date is formatted as mm/dd/yyyy');}

else{alert('This date is NOT formatted as mm/dd/yyyy');}

for(var i = 0; i < 3; i++){
    if(i === 0){
var month = str.substring(0, 2);
var dayEntered = str.substring(3, 5);
var yearEntered = str.substring(6, 10);

if(month > 12){alert('invalid month parameter entered');}
        //use swith case to get the set a days variable
switch(month){//get last day of month
    case '04':
            var days = 30
        alert(days)
    break;

    case '6':
            var days = 30
        alert(days)
    break;

    case '9':
            var days = 30
        alert(days)
    break;

    case '11':
            var days = 30
        alert(days)
    break;


    case '02':
            var days = 29
        alert(days)
    break;

    default:
            var days = 31
        alert(days)
    break;
}
}
    if(i === 1){//test days
if(days >= dayEntered){
alert('days entered correctly');}
else{alert(days + " !<= " + dayEntered);}
    }
if(i === 2){//check year, give your own min and max parameter
    //and if it is not leap year and month === '02' recheck day 
    //to make sure it is less or equal to 28 days
    alert('on step 2');
if(yearEntered >= 1989 && yearEntered <= 2020){//your own check
alert('year entered is between 1989 and 2020');}    
        if (yearEntered/400){
      result = true
    }
    else if(yearEntered/100){
      result = false
    }
    else if(yearEntered/4){
      result = true
    }
    else{
      result = false
    }
if(result === true && dayEntered <= 29){//end of validation
    alert('congratulations! you entered a valid date of '+dayEntered + "/" + month + "/" + yearEntered);
}
}
}

else{alert('This date is not formatted as mm/dd/yyy');}

Heres a Pen http://codepen.io/anon/pen/zvZzQO