web-dev-qa-db-ja.com

jQuery検証：ルールを動的に変更する

クリックしたラジオボタン（ログインまたはサインアップ）に応じて、次のいずれかを表示する単一のフォームがあります。

  • 電子メールアドレス
  • パスワード

または：

  • 名
  • 年齢
  • 電子メールアドレス
  • パスワード

ラジオボタンをクリックすると、ログイン/サインアップフィールドの表示/非表示が切り替わります。

<form id="myForm">
    <input name="userAction" type="radio" value="login" checked="checked">Login</input>
    <br />
    <input name="userAction" type="radio" value="signup">Sign Up</input>

    <div id="loginFields" style="display:none">
        <!-- Login fields (email address and password) -->
    </div>

    <div id="signupFields" style="display:none">
        <!-- Signup fields (name, age, email address, password) -->
    </div>
</form>

jQuery Validationプラグイン を使用していますが、次のルールを使用したいと思います。

var signupRules = {
    emailAddressTextBox:
    {
        required: true,
        email: true 
    },
    passwordTextBox:
    {
        required: true,
        minlength: 6,
        maxlength: 24,
        passwordValidationRule: true // custom regex added with $.validator.addMethod()
    }
};

var loginRules = {
    nameTextBox:
    {
        required: true,
        maxlength: 50
    },
    loginEmailAddressTextBox:
    {
        required: true,
        email: true 
    },
    loginPasswordTextBox:
    {
        required: true,
        minlength: 6,
        maxlength: 24,
        passwordValidationRule: true // custom regex added with $.validator.addMethod()
    },
    loginPasswordAgainTextBox:
    {
        required: true,
        minlength: 6,
        maxlength: 24,
        equalTo: "#loginPasswordTextBox"
        passwordValidationRule: true // custom regex added with $.validator.addMethod()        
    }
};

以下に基づいて正しい検証ルールを動的に追加するにはどうすればよいですか？

   $("input[name='userAction']").change(function() {
        if ($("input[name='userAction']:checked" ).val() === "login") {
            // use loginRules
        } else {
            // use signupRules
        }
    });

私は次を試しました：

$("#myForm").validate({
    rules: ($("input[name='userAction']:checked" ).val() === "login") ? loginRules : signupRules;
});

ただし、私のログインフィールドはデフォルトで表示されるため、検証は機能しますが、サインアップシナリオは機能しません。何らかの理由でログインフィールドを検証したい。何か不足していますか？

jqueryjquery-validate
45
Bullines

Ahh検証プラグイン、常にとても難しい:(

最初に、すべての入力ボックスにid属性を追加しました。次に、変更機能を作成しました。

$("input[name='userAction']").change(function() {
    $('#signupFields').toggle();
    $('#loginFields').toggle();    
    if ($("input[name='userAction']:checked").val() === "login") {
        removeRules(signupRules);
        addRules(loginRules);
    } else {        
        removeRules(loginRules);
        addRules(signupRules);

    }
});

追加および削除機能は次のようになります。

function addRules(rulesObj){
    for (var item in rulesObj){
       $('#'+item).rules('add',rulesObj[item]);  
    } 
}

function removeRules(rulesObj){
    for (var item in rulesObj){
       $('#'+item).rules('remove');  
    } 
}

それはほとんどそれです。実際の例については、こちらをご覧ください： http://jsfiddle.net/ryleyb/wHpus/66/

[〜＃〜] edit [〜＃〜]：私にとって、直感的でない部分は、追加する簡単な方法が表示されないことですvalidateを呼び出した後、ルール全体formにルールを削除し、代わりに個々のフォーム要素を操作する必要があります。

55
Ryley

または、dependsプロパティを使用できます。

http://jqueryvalidation.org/category/plugin/ 依存の検索

例：必要に応じて連絡先要素を指定し、電子メールアドレスとして指定します。後者は、電子メール経由の連絡先のチェックボックスによって異なります。

$(".selector").validate({
  rules: {
    contact: {
      required: true,
      email: {
        depends: function(element) {
          return $("#contactform_email:checked")
        }
      }
    }
  }
});
34
robert

新しい設定（ルール、メッセージなど）で再度validateを呼び出したい場合は呼び出します

$('#formid').removeData('validator')

これにより、フォームの検証が削除され、新しい設定で再度初期化されます

9
Boban Stojanovski

この投稿は数年前のものですが、何度も見られているので、jQuery Validationプラグインによりルールの読み取り、追加、削除ができるようになったと言っておくと便利だと思います。

いくつかの例：

  1. _#myField_に添付されているすべてのルールを出力します：console.log($('#myField').rules());

  2. 不要なルールを削除します：$('#myField').rules('remove', 'min');

  3. 新しいルールを追加します：$('myField').rules('add', {min: 10});

そのため、必要な最小値を動的に更新する場合に言います。直後にremoveとaddを呼び出すことができます：

_// Something happened. The minimum value should now be 100
$('#myField').rules('remove', 'min');
$('#myField').rules('add', {min: 100});
_

詳細については、こちらをご覧ください。 https://jqueryvalidation.org/category/plugin/#-rules（）

8
FlavioEscobar

ルールセットを変更する必要がないように、非表示または無効などのセレクター条件に基づいてフィールドを無視するオプションがあります。

.validate({
  ignore: ":not(:visible),:disabled",
  ...
3
jeeber

これを試して..

rules: {
    address: {
       required: {
                   depends: function(element) {
                     if (....){
                       return true;}
                     else{
                       return false;}
                   }
                 }
             }
       }

ここ からのクレジット。

3
wwanich

検証オブジェクトを追跡し、ルールを直接削除/置換します。 v1.13.0で動作します

var validation = $('#form1').validate(); //Keep track of validation object

//Rule set 1
var validationRulesLogin = {
    headerEmail: {
        required: true,
        email: true
    },
    headerPassword: "required"
};
var validationMessagesLogin = {
    headerEmail: {
        required: "Please enter your email address.",
        email: "Not a valid email address."
    },
    headerPassword: "Please enter your password."
};

//Rule set 2
var validationRulesSignup = {
    signupEmail: {
        required: true,
        email: true
    },
    signupPassword: "required",
    signupPassword2: {
        equalTo: "#phBody_txtNewPassword"
    }
};
var validationMessagesSignup = {
    signupEmail: {
        required: "Please enter your email address.",
        email: "Not a valid email address."
    },
    signupPassword: "Please enter your password.",
    signupPassword2: "Passwords are not the same."
};

//Toggle rule sets
function validatingLoginForm(){
    validation.resetForm();
    validation.settings.rules = validationRulesLogin;
    validation.settings.messages = validationMessagesLogin;
}
function validationSignupForm(){
    validation.resetForm();
    validation.settings.rules = validationRulesSignup;
    validation.settings.messages = validationMessagesSignup;
}
1
Dan

同様の問題があり、すべてのログインテキストボックスに「requiredForLogin」クラスを追加し、すべてのサインアップテキストボックスに「requiredForSignUp」クラスを追加することで解決しました。

次に、jQueryのtoggleClassとjQuery.validateのaddClassRulesを使用して、押されたボタンに応じてルールをオンまたはオフにしました。

function EnableAllValidation() {
    // remove the jquery validate error class from anything currently in error
    //  feels hackish, might be a better way to do this
    $(".error").not("label").removeClass("error");

    // remove any the 'disabled' validation classes, 
    //  and turn on all required validation classes 
    //  (so we can subsequently remove the ones not needed)
    $(".requiredForLoginDisabled").toggleClass("requiredForLoginDisabled requiredForLogin");
    $(".requiredForSignUpDisabled").toggleClass("requiredForSignUpDisabled requiredForSignUp");
}
function EnableLoginValidation() {
    // reenable all validations
    //  then disable the signUp validations
    EnableAllValidation();
    $(".requiredForSignUp").toggleClass("requiredForSignUpDisabled requiredForSignUp");
}
function EnableSignUpValidation() {
    // reenable all validations
    //  then disable the login validations
    EnableAllValidation();
    $(".requiredForLogin").toggleClass("requiredForLoginDisabled requiredForLogin");
}
$(document).ready(function () {
    $("input[value='login']").click(function () {
        EnableLoginValidation();
    });
    $("input[value='signup']").click(function () {
        EnableSignUpValidation();
    });

    $("#myForm").validate();
    jQuery.validator.addClassRules({
        requiredForSignUp: {
            required: true
        },
        requiredForLogin: {
            required: true
        }
    });

});
0
JPuchyr

私の答えを見てください https://stackoverflow.com/a/20547836/1399001 。動作するjsfiddleが含まれています。あなたの例では、このようなものになります：

$("input[name='userAction']").change(function() {

    var settings = $("#myForm").validate().settings;

      if ($("input[name='userAction']:checked" ).val() === "login") {
            $.extend(settings, {
              rules: loginRules
            });
    } else {
            $.extend(settings, {
              rules: signupRules
            });
    }


    $("#myForm").valid();

});
0
lboullo0