So machen Sie das erste Paar Felder erforderlich, und Rest nicht erforderlich

Question

Der Versuch, eine Funktion zu erstellen, bei der mindestens ein Paar des Feldpaars s_AAA/s_BBB erforderlich ist, damit das Formular übermittelt werden kann. Es gibt eine Möglichkeit für den Benutzer, bis zu 5 s_AAA/s_BBB Combos einzureichen. Betrachten Sie dies als ein Formular, in dem Sie bis zu fünf Freunde angeben können, aber mindestens 1 für das Formular einreichen müssen.

Jede Hilfe wird geschätzt!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 
    <script type="text/javascript">  
    (function ($, W, D) { 
     var SIGNUPVALIDATION = {}; 

     SIGNUPVALIDATION.UTIL = { 
      setupFormValidation: function() { 
       //form validation rules 
       $("#friend_req").validate({ 
        rules: { 
         s_referee_email: "required", 
         s_referee_fname: "required", 

        }, 
        messages: { 
         s_referee_email: "Please enter at least one friend's email address", 
         s_referee_fname: "Please enter your friends first name", 
        }, 
        submitHandler: function (form) { 
         form.submit(); 
        } 
       }); 
      } 
     } 
     //when the DOM has loaded setup form validation rules 
     $(D).ready(function ($) { 
      SIGNUPVALIDATION.UTIL.setupFormValidation(); 
     }); 

    })(jQuery, window, document); 
    </script> 

Answer 1

Sofern Sie nicht ausdrücklich es in Javascript zu tun suchen, dann können Sie nur required zu einer HTML5 Form hinzufügen. Zum Beispiel:

<input type="text" name="usrname" required> 

Das Problem wird dann Safari - die die Form nicht einreichen, wenn die erforderlichen Felder blank- bleiben aber auch nicht den Fehler an den Benutzer übertragen. Ihr Benutzer wird dort sitzen und nicht wissen, warum das Formular nicht gesendet wird. In diesem Fall können Sie einige JS verwenden, um das zu tun. Sie können fragen, warum tun Sie es nicht einfach in JS und überspringen Sie die HTML-Validierung? Nun, ich nehme an, das ist eine persönliche Entscheidung, aber ich benutze gerne einen Combo-Ansatz, nur weil ich die kleinen Popover mag, die Ihnen die HTML-Validierung in den anderen Browsern bietet.

Wenn Sie gehen, um es in JS tun Sie eine Funktion, die die Eingaben Sie wie so validieren möchten packt erstellen werden:

nameInput = document.querySelector("#name").value 

Und von dort können Sie überprüfen, ob es eine Länge ist die Eingabe, wenn Sie sicherstellen möchten, trifft es eine gewisse Mindest von Zeichen oder Sie können einfach überprüfen, um zu sehen, ob es einen Wert mit .test() mit so etwas wie hat:

/^[a-zA-Z]+/.test(nameInput) 

von dort aus, wenn es der Fall ist, gehen Sie zu Einreichen, und wenn nicht, dann geben Sie einen Fehler an uns aus er:

*assuming you have a div with a class of "error", if not you could create one dynamically 

else { 
    error.innerHTML = "You must provide a name."; 
}