Bootstrap 3表单模式，使用PHP进行验证

Question

我正在尝试使用Bootstrap 3模态函数。 我在模态中创建了一个简单的表单。

我的目的是用PHP处理表单，直到我使用以下脚本进行管理：

$(function() {
    $("button#submit").click(function() {
        $.ajax({
            type: "POST",
            url: "process.php",
            data: $('form.company').serialize(),
            success: function(response) {
                var result = jQuery.parseJSON(response);
                /* TO DO */
                if (result.success === 0) {
                    $("#error").html(response);
                    $("#error").show();
                } else {
                    $("#success").html(response);
                    $("#success").show();
                    $("#myModal").modal('hide');
                }
            },
            error: function() {
                alert("failure");
            }
        });
    });
});

这工作得很好，我能够将新创建的公司添加到数据库中，依此类推。 输入是在服务器端检查的，如果不正确，则用户将收到错误消息（当前尚未完全实现，但该想法有效）。 问题是，我想向用户显示某些字段不正确，而不仅仅是全局错误消息（ #error ）。

我发现jQuery具有表单验证选项，但由于某种原因我无法使其正常工作。 最后但并非最不重要的一点是，我想创建一个多语言应用程序。 因此，另一个问题是我应该能够更改jQuery验证方法产生的错误消息。 （我想通过我的process.php脚本传递这些消息）。

这是表格的代码：

<form class="form-horizontal company" role="form" id="comp">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">Name</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name" name="name" placeholder="Company">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="street" class="col-sm-2 control-label">Street</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="street" name="street" placeholder="Street">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="number" class="col-sm-2 control-label">Number</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="number" name="number" placeholder="Number">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="zipcode"  class="col-sm-2 control-label">ZIP Code</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="zipcode" name="zipcode" placeholder="ZIP Code">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="city" class="col-sm-2 control-label">City</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="city" name="city" placeholder="City">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="country" class="col-sm-2 control-label">Country</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="country" name="country" placeholder="Country">
                        </div>
                    </div>
                </form>

这是我尝试进行验证的脚本： http : //jsfiddle.net/v5HQr/1/

有人可以建议我吗？

Answer 1

为了使验证正常工作，我必须将引导程序类与jQuery相关联。 尝试为jQuery添加以下默认值，建议您将其放在JavaScript文件的顶部。

if (jQuery.validator) {
    jQuery.validator.setDefaults({
        debug: true,
        errorClass: 'has-error',
        validClass: 'has-success',
        ignore: "",
        highlight: function (element, errorClass, validClass) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorPlacement: function (error, element) {
            $(element).closest('.form-group').find('.help-block').text(error.text());
        },
        submitHandler: function (form) {
            if ($(form).valid()) {
                form.submit();                    
            }
            else {
              return false;
            }
        }
    }
});

}

HTML

您还需要在输入中包括所需的标记，例如：

<form>
    <input required>
</form>

您还可以添加数据属性，此站点上有一个列表可帮助您入门：

http://denverdeveloper.wordpress.com/2012/09/26/some-things-ive-learned-about-jquery-unobtrusive-validation/

data-val=”true” enable unobtrusive validation on this element (should be on every input element you want to validate)
data-val-required=”ErrMsg”  makes the input required, and shows the ErrMsg
data-val-length=”ErrMsg” 
data-val-length-min=”5” 
data-val-length-max=”15”    sets required string length and associated error message.
data-val-number=”ErrMsg”    makes a field required to be a number.
data-val-date=”ErrMsg”  requires a field to be a date (I do not recommend this, as it accepts too much – I prefer to use regex).
data-val-equalto=”ErrMsg” 
data-val-equalto-other=”Fld”    requires one field to match the other (such as password confirm.  Fld is a jQuery selector
data-val-regex=”ErrMsg” 
data-val-regex-pattern=”^regex$”    Requires the field to match the regex pattern.
data-val-email=”ErrMsg” requires a field to be a email (I do not recommend this, as it accepts too much – I prefer to use regex).
data-val-url=”ErrMsg”   requires a field to be a url (I do not recommend this, as it accepts too much – I prefer to use regex).

正如我所指出的，URL，电话，电子邮件，日期等几项内容可能会发现使用正则表达式更好。 这是我使用过的一些正则表达式：

number  ^(\d{1,3},?(\d{3},?)*\d{3}(\.\d{1,3})?|\d{1,3}(\.\d{2})?)$
date    ^[0,1]?\d{1}\/(([0-2]?\d{1})|([3][0,1]{1}))\/(([1]{1}[9]{1}[9]{1}\d{1})|([2-9]{1}\d{3}))$
url     ^(http|https)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/?([a-zA-Z0-9\-\._\?\,\'/\\\+&%\$#\=~])*$
phone   ^([\+][0-9]{1,3}([ \.\-])?)?([\(]{1}[0-9]{3}[\)])?([0-9A-Z \.\-]{1,32})((x|ext|extension)?[0-9]{1,4}?)$