Question

基本上，我在表单上运行bootstrapvalidator，它似乎决定自己验证什么（以及如何）。虽然我知道这在技术上并不是它的作用，但它确实感觉像它。

我的表格：

    <form class="form-horizontal" role="form" id="regcv" enctype="multipart/form-data">
<div class="col-md-3">
<div class="form-group">
    <label for="firstname" class="control-label">First name</label>
        <input type="text" class="form-control" id="firstname" name="firstname" placeholder="First name">
  </div>
  <div class="form-group">
    <label for="lastname" class="control-label">Last name</label>
      <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name">
  </div>
  <div class="form-group">
    <label for="email" class="control-label">Email</label>
      <input type="email" class="form-control" id="email" name="email" placeholder="Email address">
  </div>
  <div class="form-group">
    <label for="verifyemail" class="control-label">Verify email</label>
      <input type="email" class="form-control" id="verifyemail" name="verifyemail" placeholder="Email verification">
  </div>
  <div class="form-group">
    <label for="phone" class="control-label">Phone</label>
      <input type="text" class="form-control" id="phone" name="phone" placeholder="+47 00 00 00 00">
  </div>
</div>
<div class="col-md-offset-1 col-md-3">
  <div class="form-group">
    <label for="freetext" class="control-label">Free text (<small>optional</small>)</label>
      <textarea class="form-control" id="freetext" rows="16" name="freetext" placeholder="Anything you feel would be applicable, a full resume or similar"></textare
a>
  </div>
</div>
<div class="col-md-offset-1 col-md-3">
<div class="form-group">
    <label for="cv">Upload CV</label>
    <input type="file" id="cv" name="cv[]" accept="application/pdf">
    <p class="help-block">Accepted fileformats: .pdf.</p>
  </div>
<div class="form-group">
    <label for="certs">Upload certificates</label>
    <input type="file" id="certs" name="certs[]" accept="application/pdf">
    <p class="help-block">Accepted fileformats: .pdf.</p>
  </div>
<div class="form-group">

当表单如上所示时，它会正确验证前四个字段（firstname，lastname，email和verifyemail），但禁用提交按钮而不将任何标记为无效。但是，如果我将'phone'字段更改为type ='email'，我可以通过点击'Submit'来强制执行，然后该字段得到验证，我可以再次点击'Submit'并实际发送数据。它还改变了形式并添加了data-bv-field ='phone'，原因有些奇怪。

我的JS：

    $('#regcv').bootstrapValidator({
fields: {
firstname: {
validators: {
notEmpty: {
message: 'Required field'
}
}
},
lastname: {
validators: {
notEmpty: {
message: 'Required field'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Required field'
},
emailAddress: {
message: 'The input is not a valid email address'
              }
}
},
verifyemail: {
validators: {
notEmpty: {
message: 'Required field'
          },
identical: {
field: 'email',
       message: 'Email does not match'
           }
            }
             },
             },
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
       invalid: 'glyphicon glyphicon-remove',
       validating: 'glyphicon glyphicon-refresh'
               },
        submitHandler: function (validator, form, submitButton) {
                var form = new FormData($('#regcv')[0]);
                $.ajax({
url: 'ajax/action.php',
type: 'POST',
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', progress, false);
}
return myXhr;
},
success: function (res) {
$('#content_here_please').html(res);
},
error: function (request, error) {
alert(" Can't do because: " + error);
},
data: form,
cache: false,
contentType: false,
processData: false
});
//$("#regcv :input").attr('disabled', true);
}
});

的jsfiddle： http://jsfiddle.net/nz7ej/

任何帮助都将不胜感激。

编辑：忘记提及，但删除字段本身（电话字段）没有帮助，表单仍然不会验证，即使存在对该字段的零引用，并且所有当前字段都有效。

Answer 1

我能够通过将手机输入字段类型更改回“text”并在JS验证器列表中添加电话验证器来验证工作：

            phone: {
                validators: {
                    notEmpty: {
                        message: 'Required'
                    },
                    phone: {
                        country: 'US',
                        message: 'Enter a valid phone number'
                    }
                }
            },

根据您的占位符文字，您似乎想要验证非美国号码。请参阅此图表以查看要传递给电话验证器的国家/地区代码：

https://www.iso.org/obp/ui/#search

虽然看起来当前的bootstrapvalidattor仅适用于开箱即用的美国和英国电话号码：

http://bootstrapvalidator.com/validators/phone/

最后，请注意JSFiddle工具栏上的TidyUp按钮 - 它使您的代码更具可读性。

Bootstrapvalidator验证字段而不被告知

1 个答案: