Question

我正在为我正在进行的项目开发一个注册表。该项目使用Bootstrap和jQuery来控制表单验证，我使用的是validate插件。这是使用C＃在ASP.NET MVC 4 Web应用程序中设置的。我已经正确配置了所有捆绑包和路由，但是在表单上显示消息时没有运气。

以下是表格：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Registration Form</h2>
<form id="formRegister" class="form-horizontal col-xs-3">
    <div class="form-group">
        <label for="textFirstName" class="control-label col-xs-4">First name</label>
        <div class="col-xs-8">
            <input type="text" name="textFirstName" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="textLastName" class="control-label col-xs-4">Last name</label>
        <div class="col-xs-8">
            <input type="text" name="textLastName" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="textEmail" class="control-label col-xs-4">Email</label>
        <div class="col-xs-8">
            <input type="text" name="textEmail" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="textEmail2" class="control-label col-xs-4">Reenter email</label>
        <div class="col-xs-8">
            <input type="text" name="textEmail2" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="passwordPW1" class="control-label col-xs-4">Password</label>
        <div class="col-xs-8">
            <input type="password" name="passwordPW1" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="passwordPW2" class="control-label col-xs-4">Reenter Password</label>
        <div class="col-xs-8">
            <input type="password" name="passwordPW2" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <div class="btn-group col-xs-offset-4 col-xs-10">
            <button type="reset" class="btn btn-info">Clear</button>
            <button type="submit" class="btn btn-info">Submit</button>
        </div>
    </div>

</form>

这是JavaScript：

    $(document).ready(function () {
    $('#formRegister').validate({
        rules: {
            textFirstName: {
                required: true,
                minlength: 1,
                maxlength: 50
            },
            textLastName: {
                required: false,
                maxlength: 50
            },
            textEmail: {
                required: true,
                email: true
            },
            textEmail2: {
                required: true,
                email: true,
                equalTo: '#textEmail'
            },
            passwordPW1: {
                required: true,
                minlength: 4
            },
            passwordPW2: {
                required: true,
                equalTo: '#passwordPW1'
            }
        },
        messages: {
            textFirstName: "The first name must be from 1 to 50 characters in length",
            textLastName: "The last name must be from 0 to 50 characters in length",
            textEmail: "Please enter a valid email address",
            textEmail2: "Emails do not match",
            passwordPW1: "The password must be from 4 to 50 characters in length",
            passwordPW2: "Passwords do not match"
        },
        highlight: function(element){
            $(element).closest('.form-control').removeClass('success').addClass('error');
        },
        success: function(element){
            element.text('OK!').addClass('valid')
            .closest('.form-control').removeClass('error').addClass('success');
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
});

Answer 1

messages，highlight等属性不是rules的子属性

jQuery(function ($) {
    $('#formRegister').validate({
        rules: {
            textFirstName: {
                required: true,
                minlength: 1,
                maxlength: 50
            },
            textLastName: {
                required: false,
                maxlength: 50
            },
            textEmail: {
                required: true,
                email: true
            },
            textEmail2: {
                required: true,
                email: true,
                equalTo: '#textEmail'
            },
            passwordPW1: {
                required: true,
                minlength: 4
            },
            passwordPW2: {
                required: true,
                equalTo: '#passwordPW1'
            }
        },
        messages: {
            textFirstName: "The first name must be from 1 to 50 characters in length",
            textLastName: "The last name must be from 0 to 50 characters in length",
            textEmail: "Please enter a valid email address",
            textEmail2: "Emails do not match",
            passwordPW1: "The password must be from 4 to 50 characters in length",
            passwordPW2: "Passwords do not match"
        },
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
            .closest('.form-group').removeClass('error').addClass('success');
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
});

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.metadata/2.0/jquery.metadata.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>


<h2>Registration Form</h2>
<form id="formRegister" class="form-horizontal col-xs-3">
    <div class="form-group">
        <label for="textFirstName" class="control-label col-xs-4">First name</label>
        <div class="col-xs-8">
            <input type="text" name="textFirstName" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="textLastName" class="control-label col-xs-4">Last name</label>
        <div class="col-xs-8">
            <input type="text" name="textLastName" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="textEmail" class="control-label col-xs-4">Email</label>
        <div class="col-xs-8">
            <input type="text" name="textEmail" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="textEmail2" class="control-label col-xs-4">Reenter email</label>
        <div class="col-xs-8">
            <input type="text" name="textEmail2" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="passwordPW1" class="control-label col-xs-4">Password</label>
        <div class="col-xs-8">
            <input type="password" name="passwordPW1" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="passwordPW2" class="control-label col-xs-4">Reenter Password</label>
        <div class="col-xs-8">
            <input type="password" name="passwordPW2" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <div class="btn-group col-xs-offset-4 col-xs-10">
            <button type="reset" class="btn btn-info">Clear</button>
            <button type="submit" class="btn btn-info">Submit</button>
        </div>
    </div>
    
</form>

Answer 2

您需要添加消息容器，以便可以在某处显示消息。添加：

container: '#messages',

在你的js函数就在feedbackIcons和

之前

                <div class="form-group">
                        <div id="messages"></div>
                </div>

表单验证消息未显示

2 个答案: