Question

我正在尝试使用Bootstrap 3模态功能。我在模态中创建了一个简单的表单。 enter image description here

我的目标是使用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).

正如我所说 - 有几件事，网址，电话，电子邮件，日期，你可能会发现使用正则表达式可以更好地工作。以下是我使用的一些正则表达式：

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\-\._\?\,\'/\\\+&amp;%\$#\=~])*$
phone   ^([\+][0-9]{1,3}([ \.\-])?)?([\(]{1}[0-9]{3}[\)])?([0-9A-Z \.\-]{1,32})((x|ext|extension)?[0-9]{1,4}?)$

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

1 个答案:

HTML