对表单的两种不同验证

时间:2012-07-04 14:38:29

标签: php jquery validation

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

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

3 个答案:

答案 0 :(得分:3)

在我看来,点击链接时需要执行以下操作(全部在javascript / jQuery中):

  • 取消链接的默认操作;
  • nameemail;
  • 中删除规则
  • phone字段添加新规则;
  • 可选地隐藏phone字段以外的所有字段。

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

答案 1 :(得分: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>

答案 2 :(得分:1)

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

  • 不能成为链接
  • 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 //-->