0

我有一个包含提交按钮的表单。我正在使用 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>

当用户单击“呼叫我”时，验证将只是“电话”字段。

4

3 回答 3

3

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

  • 取消链接的默认操作；
  • name从and中删除规则email；
  • 向该字段添加新规则phone；
  • 可选择隐藏除该字段之外的所有字段phone。

您可以在插件文档的规则部分找到更多详细信息。

于 2012-07-04T15:12:03.983 回答
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>
于 2012-07-04T15:01:29.593 回答
1

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

  • 不能是链接
  • 不能离开

有人可以确认吗？

<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 //-->
于 2012-07-04T18:21:12.997 回答