Question

我有一个包含提交按钮的表单。我正在使用form.validation插件

我已经设定了规则。没关系！

但是现在我创建了一个表单链接，当用户点击时，我想更改这些规则。有可能吗？

例如：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script type="text/javascript">
$().ready(function() {
    $(".myform").validate({
        rules: {
            name: {
                required: true
            },
            email: {
                required: true
            },
        }
    });
});
</script>
<form class="myform">
    Name: <input type="text" name="name">
    Email: <input type="text" name="email">
    Phone: <input type="text" name="phone">
    <input type="submit" value="Send">
</form>
<a href="#">Call me</a>

当用户点击“给我打电话”时，验证将只是“电话”字段。

Answer 1

在我看来，点击链接时需要执行以下操作（全部在javascript / jQuery中）：

取消链接的默认操作;
从name和email;
向phone字段添加新规则;
可选地隐藏phone字段以外的所有字段。

您可以在插件文档的rules section中找到更多详细信息。

Answer 2

这段代码语法和结构都有很多错误

<script type="text/javascript">
$().ready(function() {
$(".myform").validate({
    rules: {
        name: {
            required: true
        },
        email: {
            required: true
        },
    }
});
});
</script>
<form class="myform">
Name: <input type="text" name="name">
Email: <input type="text" name="email">
Phone: <input type="text" name="phone">
</form>
<a href="#">Call me</a>

看起来应该更像

<script type="text/javascript">
$(document).ready(function() {
$("#callme").click(function(){
   $(".myform").validate({
    rules: {
        phone: {
            required: true
        }
    /*note the removed ,*/
    }
});
});
$("#submit").click(function(){
$(".myform").validate({
    rules: {
        name: {
            required: true
        },
        email: {
            required: true
        }
    /*note the removed ,*/
    }
});
});
});
</script>
<!-- Your Form must have a method attribute either post or get //-->
<form class="myform" method="post" action="">
<label for="name">Name:</label> <input type="text" name="name" id="name">
<label for="email">Email:</label> <input type="text" name="email" id="email">
<label for="phone">Phone:</label> <input type="text" name="phone" id="phone">
<!-- Hide this label with css //-->
<label for="submit" class="hidden">submit:</label><input type="submit" value="submit" text="submit" id="submit" />
</form>
<!-- Link this to another form with new js validation rules //-->
<a href="#" id="callme">Call me</a>

Answer 3

这种方式有效。在我的测试中，我看到了：

不能成为链接
Cannou离开

有人可以确认吗？

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#submit1").click(function(){
   $(".myform").validate({
    rules: {
        phone: {
            required: true
        }
    }
});
});
$("#submit").click(function(){
$(".myform").validate({
    rules: {
        name: {
            required: true
        },
        email: {
            required: true
        }
    }
});
});
});
</script>
<!-- Your Form must have a method attribute either post or get //-->
<form class="myform" method="post" action="">
<label for="name">Name:</label> <input type="text" name="name" id="name">
<label for="email">Email:</label> <input type="text" name="email" id="email">
<label for="phone">Phone:</label> <input type="text" name="phone" id="phone">
<!-- Hide this label with css //-->
<input type="submit" value="submit" text="submit" id="submit" />
<input type="submit" value="submit1" text="submit" id="submit1" />
</form>
<!-- Link this to another form with new js validation rules //-->

对表单的两种不同验证

3 个答案: