Question

我在mvc 4中的局部视图中有一个小表单。

我无法在jQuery中触发验证。当我点击提交按钮时，不会弹出任何验证消息。

我的HTML

<form id="myform">
    <table id="tblSegmentDetails">
        <tr>
            <td>
                <input type="text" id="tbname" />
            </td>
            <td>
                <input type="text" id="tbemail" />
            </td>
            <td>
                <input type="text" id="tbphone" />
            </td>
            <td>
                <input type="submit" value="Submit" />
            </td>
        </tr>
    </table>
</form>

的jQuery

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>


    <script type="text/javascript">   
    //    $(document).ready(function () {

    $("form[id='myform']").validate({
        rules: {
            tbname: {
                required: true,
                minlength: 2,
                maxlength: 50
            },
            tbemail: {
                required: true,
                email: true,
                minlength: 2,
                maxlength: 50
            },
            tbphone: {
                required: true,
                phoneUS: true,
                minlength: 9,
                maxlength: 20
            }
        },
        messages: {
            name: {
                required: "Please provide your name",
                minlength: "Too few characters!",
                maxlength: "Too many characters!"
            },
            email: {
                required: "Please provide your email",
                email: "Your email address must be in the format of name@domain.com",
                minlength: "Too few characters!",
                maxlength: "Too many characters!"
            },
            phone_number: {
                required: "Please provide your phone number",
                phoneUS: "Please provide a valid US phone number",
                minlength: "Too few characters!",
                maxlength: "Too many characters!"
            }
        }
    });
    //    });
</script>

当我点击提交按钮时，不会弹出任何验证消息。

这是进行客户端验证的正确方法吗？我相信我不想在模型中添加data-annotation。只想做简单的客户端验证。

另一个问题是如果我取消注释document.ready，那么我会收到以下错误。

当我点击提交按钮时，不会弹出任何验证消息。

Answer 1

不知道你的代码究竟是什么问题，但这段代码非常适合我，请参考下面的代码： -

<html>
<head>

  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

  <link href="runnable.css" rel="stylesheet" />
  <!-- Load jQuery and the validate plugin -->
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

  <!-- jQuery Form Validation code -->
  <script>

  // When the browser is ready...
  $(function() {

    // Setup form validation on the #register-form element
    $("#register-form").validate({

        // Specify the validation rules
        rules: {
            firstname: "required",
            lastname: "required",
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            },
            agree: "required"
        },

        // Specify the validation error messages
        messages: {
            firstname: "Please enter your first name",
            lastname: "Please enter your last name",
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy"
        },

        submitHandler: function(form) {
            form.submit();
        }
    });

  });

  </script>
</head>
<body>
  <h1>Register here</h1>

  <!--  The form that will be parsed by jQuery before submit  -->
  <form action="" method="post" id="register-form" novalidate="novalidate">

    <div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
    <div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
    <div class="label">Email</div><input type="text" id="email" name="email" /><br />
    <div class="label">Password</div><input type="password" id="password" name="password" /><br />
    <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>

  </form>

</body>
</html>



<style>
.label {
  width:100px;
  text-align:right;
  float:left;
  padding-right:10px;
  font-weight:bold;
}
#register-form label.error {
  color:#FB3A3A;
  font-weight:bold;
}
h1 {
  font-family: Helvetica;
  font-weight: 100;
  color:#333;
  padding-bottom:20px;
}
</style>

jQuery Validate插件不显示验证消息

1 个答案: