2013-02-28 12 views
7

Formumu doğrulamak istiyorum, böylece iki boş alanın dışında, en az bir alan doldurulmalı ve iki alan da dolu; ancak herhangi bir alanı boş bırakamaz.jQuery Doğrulama, iki boş alanın dışında, en az bir alan doldurulmalıdır veya her ikisi de

jquery-1.9.1-min.js kullanıyorum ve işte benim html sayfam.

<form action="#" class="send_form" id="forgot_pass_form" method="POST"> 
      <fieldset> 
       <div class="send_row"> 
        <label class="padding-top10">Email</label> 
        <input type="text" class="send_email" id="email" name="email" /> 
        <em>You need to type an email address</em> 
       </div> 

       <div class="send_row option">OR</div> 

       <div class="send_row"> 
        <label class="padding-top10">Username</label> 
        <input type="text" class="send_username" id="uname" name="uname" /> 
       </div> 


       <div class="send_row send_submitforgotuser"> 
        <input type="submit" value="Submit" /> 
       </div> 
      </fieldset> 
      </form> 

Herhangi bir öneri nasıl yapılır ....?

Sofar ben hala friutful çıktı almıyorum

jQuery.validator.addMethod("require_from_group", function(value, element, options) { 
    alert("xxx"); 
    var valid = $(options[1], element.form).filter(function() { 
     return $(this).val(); 
    }).length >= options[0]; 

    if(!$(element).data('reval')) { 
     var fields = $(options[1], element.form); 
     fields.data('reval', true).valid(); 
     fields.data('reval', false); 
    } 
    return valid; 
}, jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields.")); 

çalıştılar.

+0

jQuery Validate eklentisini eklediniz mi? Eğer 'validator.addMethod()' kullandığınız için, bu jQuery doğrula eklentisi dahil ve düzgün yapılandırılmış olmasını gerektirir. – Sparky

+0

Lütfen yinelenen sorular göndererek SO'yı kötüye kullanmayın: [JQuery-1.9.1.min] 'deki iki alandan birini (boş alan olarak) doğrulayın (http://stackoverflow.com/questions/15134832/validatein-terms -Kalan alan-herhangi bir-out-of-iki-alanları-in-jquery-1-9-1-min) – Sparky

cevap

17

the jQuery Validate plugin'un bir parçası olan validator.addMethod'u kullanmaya çalışıyorsunuz. Henüz yapmadıysanız bu eklentiyi kodunuza eklemeniz gerekecek.

the Validate plugin's additional-methods.js file'un bir parçası olan require_from_group kuralını kullanın. (Çok additional-methods.js dosyayı eklemeyi unutmayın.)

rules: { 
    myfieldname: { 
     require_from_group: [1, ".class"] 
    } 
} 
  • İlk parametre gerekli öğelerin sayısıdır.
  • İkinci parametre, gruplandırmanızdaki tüm öğelere atanan class'dur. İki giriş öğenize bir send sınıfı ekledim.

  • Ayrıca içine bir iki mesaj birleştirmek için the groups option kullanın.

jQuery:

$(document).ready(function() { 

    $('#forgot_pass_form').validate({ // initialize the plugin 
     groups: { // consolidate messages into one 
      names: "uname email" 
     }, 
     rules: { 
      uname: { 
       require_from_group: [1, ".send"] 
      }, 
      email: { 
       require_from_group: [1, ".send"] 
      } 
     } 
    }); 

    // for your custom message 
    jQuery.extend(jQuery.validator.messages, { 
     require_from_group: jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields.") 
    }); 

}); 

Çalışma Deneme: http://jsfiddle.net/sgmvY/1/


DÜZENLEME: require_from_group yöntemle As per Github, there is an open issue. Düzeltilinceye kadar geliştirici bu çözümü aşağıda tavsiye ediyor. Düzeltilen yöntemi manuel olarak kodunuza ekleyeceğinizden, additional-methods.js dosyasını eklemenize gerek yoktur.

Yeni Çalışma Demosu: http://jsfiddle.net/kE7DR/2/

$(document).ready(function() { 

    jQuery.validator.addMethod("require_from_group", function (value, element, options) { 
     var numberRequired = options[0]; 
     var selector = options[1]; 
     var fields = $(selector, element.form); 
     var filled_fields = fields.filter(function() { 
      // it's more clear to compare with empty string 
      return $(this).val() != ""; 
     }); 
     var empty_fields = fields.not(filled_fields); 
     // we will mark only first empty field as invalid 
     if (filled_fields.length < numberRequired && empty_fields[0] == element) { 
      return false; 
     } 
     return true; 
     // {0} below is the 0th item in the options field 
    }, jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields.")); 

    $('#forgot_pass_form').validate({ // initialize the plugin 
     groups: { 
      names: "uname email" 
     }, 
     rules: { 
      uname: { 
       require_from_group: [1, ".send"] 
      }, 
      email: { 
       require_from_group: [1, ".send"] 
      } 
     } 
    }); 



}); 
+0

geç cevap için üzgünüm, .... cevabınız için teşekkürler.İlk bir şey: olabilir Bunu bir işlev olarak yazdıktan sonra jQuery doğrulamasında çağrılacaktır. gibi 1> function validateUser() sonra 2> $ (document) .ready (function() {// validateUSer();} – bigZero

+0

@bigZero, validate() 'sadece eklentinin nasıl başlatıldığıdır. Başka bir işlevin içine koyma noktasında, bir fonksiyonun içindeki formunun geçerliliğini _test etmek istiyorsanız, herhangi bir zamanda sadece [geçerli]() 'yi kullanın (http://docs.jquery.com/Plugins/Validation/valid) eklenti başlatıldıktan sonra. – Sparky

0

@Sparky bir Hesap adı ve/veya Şifre güncellemesini doğrulamak için cevabınızı kullanmaya çalışıyorum. Ben orijinal Hesap Adı ve Şifre girin ve ardından güncelleme düğmesi ve özgün Hesap adının doğrulama tıklayıp Parola (yani hiçbir ileti, yeni bir hesap veya Şifre girilmesi gerektiğini söylemek) gerçekleştirilir. Benim kodum:

$(document).ready(function(){ 
$.validator.addMethod(
     "regex", 
     function(value, element, regexp) 
     { 
      if (regexp.constructor != RegExp) 
       regexp = new RegExp(regexp); 
      else if (regexp.global) 
       regexp.lastIndex = 0; 
      return this.optional(element) || regexp.test(value); 
     }, 
     "Please enter correct Characters." 
); 
jQuery.validator.addMethod("require_from_group", function (value, element, options) { 
    var numberRequired = options[0]; 
    var selector = options[1]; 
    var fields = $(selector, element.form); 
    var filled_fields = fields.filter(function() { 
     // it's more clear to compare with empty string 
     return $(this).val() != ""; 
    }); 
    var empty_fields = fields.not(filled_fields); 
    // we will mark only first empty field as invalid 
    if (filled_fields.length < numberRequired && empty_fields[0] == element) { 
     return false; 
    } 
    return true; 
    // {0} below is the 0th item in the options field 
}, jQuery.format("'Please enter either a new Account name and/or a new password'/Please fill out at least {0} of these fields.")); 
$('[data-toggle="tooltip"]').tooltip(); 
$("#contactForm").validate({ 
    groups: { // consolidate messages into one 
     names: "accountName1 enterPassword1" 
    }, 
    rules: { 
     accountName: { 
      required: true, 
      minlength: 2 
     }, 

     enterPassword: { 
      required: true, 
      minlength: 8 
     }, 

     accountName1: { 
      require_from_group: [1, ".send"], 
      minlength: 2 
     }, 

     accountName2: { 
      minlength: 2, 
      equalTo: "#accountName1" 
     }, 

     enterPassword1: { 
      require_from_group: [1, ".send"], 
      regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[[email protected]$!%*?&])[A-Za-z\[email protected]$!%*?&]{8,}/, 
      minlength: 8 
     }, 

     enterPassword2: { 
      regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[[email protected]$!%*?&])[A-Za-z\[email protected]$!%*?&]{8,}/, 
      minlength: 8, 
      equalTo: "#enterPassword1" 
     } 
    }, 

    messages: { 
     accountName: { 
      required: "Please enter your current account name.", 
      minlength: "Your account name must consist of at least 2 characters." 
     }, 

     enterPassword: { 
      required: "Please enter your current password.", 
      minlength: "Your password must consist of at least 8 characters." 
     }, 

     accountName1: { 
      minlength: "Your account name must consist of at least 2 characters." 
     }, 

     accountName2: { 
      minlength: "Your account name must consist of at least 2 characters.", 
      equalTo: "Your confirmation account name does not match the original." 
     }, 

     enterPassword1: { 
      regex: "Please nter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric..", 
      minlength: "Your password must consist of at least 8 characters." 
     }, 

     enterPassword2: { 
      regex: "Please enter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric..", 
      minlength: "Your password must consist of at least 8 characters.", 
      equalTo: "Your confirmation password does not match the original." 
     } 
    }, 

    submitHandler : function(contactForm) { 
     //do something here 
     var frm = $('#contactForm'); 
     //alert($("#accountName1").val()); 

     $.ajax({ 
      type: "POST", 
      url: "UpdateAccountView", 
      cache: false, 
      data: frm.serialize(), 
      success: function(data){ 
       console.log('Submission was successful.'); 
       console.log(data); 

       $("#accountName").focus(); 
       $('#ajaxGetUserServletResponse').text(data); 
      } 
     }); 
    } 
});  
}); // end document.ready 
İlgili konular