Eingänge im Formular validieren

-1

Wie validiere ich die Eingabe (Name und Alter) unten? Z.B. keine leeren Eingaben zulassen, maximales Alter von 0 bis 100 und maximale Länge? Ich habe gerade angefangen, heute in JavaScript/JQuery zu schauen.Eingänge im Formular validieren

<form action="#"> 
    <fieldset> 
     <div class="textinput"> 
      <label for="name">Your name:</label> 
      <input type="text" name="name"> 
     </div> 

     <div class="textinput"> 
      <label for="name">Your age:</label> 
      <input type="text" name="age"> 
     </div> 

     <div class="textareainput"> 
      <label for="info">About yourself:</label> 
      <textarea></textarea> 
     </div> 

     <div class="action"> 
      <button>Submit</button> 
     </div> 
    </fieldset> 
</form>

Ich hoffe, das ist keine schlechte Frage. Wenn ja, bitte geben Sie mir den Grund für den Downvote, damit ich meine zukünftigen Beiträge verbessern kann.

Quelle

2016-08-17 skylake

Ich schlage vor, einen Leitfaden über JS zu lesen. (Hinweis: Sie müssen den HTML-Code ändern und Ids hinzufügen, wenn Sie das Formular in seinem aktuellen Status mit JS validieren wollen.) –

@ d3r1ck Ich sehe, ich kann dem nicht widersprechen. Dieser Teil wurde entfernt. Danke für Ihre Rückmeldung. – skylake

Ich denke, das ist was du willst. Es gibt so viele Bibliotheken (Validierungen), mit denen Sie Ihr Skript überprüfen können. aber wenn du es auf deine eigene Art machen willst, probiere das aus.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
\t 
 
<form action="#"> 
 
     <fieldset> 
 
      <div class="textinput"> 
 
       <label for="name">Your name:</label> 
 
       <input type="text" name="name" id="nameid"> 
 
      </div> 
 

 
      <div class="textinput"> 
 
       <label for="name">Your age:</label> 
 
       <input type="text" name="age" id="ageid"> 
 
      </div> 
 

 
      <div class="textareainput"> 
 
       <label for="info">About yourself:</label> 
 
       <textarea id="textareaid"></textarea> 
 
      </div> 
 
      <h3 style="color:red;font-family:monospace;" id="warning"></h3> 
 
      <div class="action"> 
 
       <input type="button" value="submit" id="click"> 
 
      </div> 
 
     </fieldset> 
 
    </form> 
 
\t 
 
</body> 
 

 
<script type="text/javascript"> 
 
    $("#click").click(function(){ 
 
    \t $("#warning").text(""); 
 
    \t var namefield = $("#nameid").val(); 
 
    \t var agefield = $("#ageid").val(); 
 
    \t var texarefield = $("#textareaid").val(); 
 

 
    \t if (namefield == "" || agefield == "" || texarefield == "") 
 
    \t { 
 
    \t \t $("#warning").text("all field sholud be fill"); 
 
    \t } 
 
     else if (namefield != "" && agefield != "" && texarefield != "") 
 
     { 
 
     \t var ageInteger = parseInt(agefield); 
 

 
     \t if (ageInteger < 0 || ageInteger > 100) 
 
     \t { 
 
     \t \t $("#warning").text("age should be between 0 and 100"); 
 
     \t } 
 
     \t else 
 
     \t { 
 
     \t \t $("#warning").text(""); 
 
     \t } 
 
     } 
 

 
     else 
 
     { 
 
     \t $("#warning").text(""); 
 
     } 
 

 
    }); 
 
</script> 
 
</html>

dies ist sehr einfach und einfach validation.hope wird diese Ihnen helfen.

Quelle

2016-08-17 05:30:37

-1

können Sie https://jqueryvalidation.org/

Die HTML nicht zu ändern verwenden müssen. Siehe https://jqueryvalidation.org/validate/#rules

Quelle

2016-08-17 02:11:06