Question

我有以下jQuery脚本。

function updateItem(form) {
    var validator = $("#add-experience-form").validate({
        debug: true,
        rules: {
            eventTitle: {
                required: true
            }
        },
        messages: {
            eventTitle: {
                required: "Please, enter a title."
            }
        }
    });

    if (!validator.valid()) {
        return;
    }

}

这是HTML：

<form action="/User/AddExperience" id="add-experience-form" method="post" novalidate="novalidate">                    
    <p>
        <label>Experience Title<span class="required">*</span></label>                    
        <input id="eventTitle" name="eventTitle" required="required" style="width: 350px;" type="text" value="">
        <span class="field-validation-valid" data-valmsg-for="eventTitle" data-valmsg-replace="true"></span>
        <br>                 
        <label>&nbsp;</label><span class="tip">50 character maximum</span>                          
    </p>

{

                        体验标题
                        @ * @                         最多50个字符

由于某种原因，即使validator.valid（）的计算结果为false，也不会显示上述表单的错误消息。

如果有帮助，我把这个表单放在jQuery UI对话框中，但我认为这不重要。

有什么想法吗？

Answer 1

要验证html表单，最简单的方法是结合两个开源强大的框架twitter bootstrap（以获得更好的形式）和jquery.validate.js插件（用于验证）。

Bootstrap框架：http://getbootstrap.com/getting-started/。

Jquery验证插件：http://jqueryvalidation.org/

所以你的HTML代码和你的脚本可能会像这样显示

Html代码：首先添加此链接

<link href="bootstrap/bootstrap.min.css" rel="stylesheet" media="screen">

然后

<form  method="post" action="/User/AddExperience" id="add-experience-form" class="form-horizontal">
    <fieldset>

        <h4 class="text-primary">fields required * </h4>

       <div class="form-group">
          <div class="control-group">
            <label class="control-label col-xs-3" for="experienceTitle">Experience Title<span class="req">*</span></label> 
            <div class="col-xs-9">
              <input type="text" class="form-control" id="eventTitle" name="eventTitle">
              <span class="help-block"></span>
           </div>
         </div>
       </div>

 <div class="form-group">
        <div class="col-xs-offset-3 col-xs-9">
                   <div class="form-actions">
                <input type="submit" class="btn btn-primary" name="newsubmit" id="newsubmit" value="Submit">
                <input type="reset" class="btn btn-default" value="Reset">
                   </div>
           </div>
        </div>
    </fieldset>


</form>

Jquery脚本：将它放在名为validate.js的js文件中

$(document).ready(function(){

jQuery.validator.addMethod("lettersonly", function(value, element) {
    return this.optional(element) || /^[a-z]+$/i.test(value);
});     

$('#add-experience-form').validate({
    rules: {
        eventTitle: {
            minlength: 2,
            lettersonly:true,
            required: true
        }
    },

    messages: {

        eventTitle: {
            required:"blablabla",
            minlenght:"blablabla",
            maxlenght:"50 character maximum",
            lettersonly: "Letters only please"
        }
    },


    highlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').removeClass('error').addClass('success');
    },
    success: function (label) {
        $(label).closest('form').find('.valid').removeClass("invalid");
    },
    errorPlacement: function (error, element) {
        element.closest('.control-group').find('.help-block').html(error.text());
    }
}).cancelSubmit=true; // to block the submit of this plugin and call submit to php file

}）;

您可以将所有这些脚本放在一个名为js的文件夹中，然后将其添加到您的代码中

<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/validate.js"></script>

有关详细信息，请参阅文档http://jqueryvalidation.org/documentation/

使用jQuery Validate不显示错误消息

1 个答案: