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>

ユーザーが「Callme」をクリックすると、検証は「phone」フィールドのみになります。

4

3 に答える 3

3

リンクがクリックされたときに次のことを行う必要があるようです（すべてjavascript / jQuery内）：

  • リンクのデフォルトのアクションをキャンセルします。
  • nameおよびからルールを削除します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

このように機能しました。私のテストでは、次のことがわかります。

  • リンクにすることはできません
  • 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 //-->
于 2012-07-04T18:21:12.997 に答える