wie man ein Formular beim Senden stoppt, ohne die Schaltfläche mit JQuery zu deaktivieren?

Hallo Ich habe eine einfache Form zu validieren Ich möchte eine clientseitige Validierung machen lässt sagen, dass mein Formular nur ein Feld für den Namen hat Ich möchte überprüfen, ob der Name Länge zwischen 5 und 20 Zeichen ist, wenn ja dann kein Problem und die Daten werden an den Server gesendet und dann eine serverseitige Validierung anwenden, aber wenn es nicht ist, dann wird eine Fehlermeldung in einem Bereich neben dem Eingabefeld angezeigt, dass es 5 bis 20 Zeichen sein muss.Das Problem ist, wenn ich drücke die Submit - Taste zeigt das Ergebnis für weniger als eine Sekunde, dann geht es, weil der Submit - Button die Seite neu lädt, was bedeutet, dass ich auch meine serverseitige Validierung mit einbeziehe, da die Input - Daten bereits gesendet wurden Übermitteln Sie die Schaltfläche, um Daten an den Server zu senden und die Seite neu zu laden, ohne die Schaltfläche zu deaktivieren.wie man ein Formular beim Senden stoppt, ohne die Schaltfläche mit JQuery zu deaktivieren?

hier ist mein Beispielcode

<!doctype html> 
<html> 
<head> 
    <title>form validation</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

    <script> 
     $(document).ready(function() { 
      $("#submit").click(function(){ 
       myfunction(); 
      }); 

      function myfunction() 
      { 
       name = $("#user").val(); 
       nameError = $(".error").first(); 
       myError = ""; 
       if(name.length < 5 || name.length > 20) 
        myError += "length should be between 5 and 20 "; 
       else 
        myError += "ok" 

       nameError.html(myError); 

      } 
     }); 
    </script> 

    <style> 
     .error 
     { 
      color : red; 
      text-transform: capitalize; 
      margin-left: 20px; 
     } 
    </style> 
</head> 
<body> 

    <form method="post" action=""> 
     NAME : <input type="text" name="user" id="user"><span class="error"></span><br /> 
     <input type="submit" value="Submit" id="submit"> 
    </form> 

</body> 
</html>

Quelle

2016-05-31 Mohammad Istanboli

return true/false aus "myfunction" und auf Taste überprüfen wie –

Das Problem ist, Sie auf der Suche nach einem Problem nicht Formularübermittlung abgebrochen wird.

Um dies zu tun, müssen Sie auf ein Anmeldeereignis im Formular warten, nicht auf ein Klickereignis auf der Schaltfläche.

Versuchen:

 $("form").on('submit', myfunction); //<-- listen for form submit, not button click 

     function myfunction(evt) { //<-- the event object is automatically passed along; 
            // this is key for suppressing submission 
      name = $("#user").val(); 
      nameError = $(".error").first(); 
      myError = ""; 
      if(name.length < 5 || name.length > 20) 
       myError += "length should be between 5 and 20 "; 
      else 
       myError += "ok" 

      if (myError) { 
       evt.preventDefault(); //<-- suppress submission if error found 
       nameError.html(myError); 
      } 

     }

Sie alternativ HTML5 validation nutzen könnten und Ihr Leben ein wenig leichter machen.

Quelle

2016-05-31 11:33:52 Utkanos

Vielen Dank für Ihre Hilfe btw die evt.preventDefault() verhindert auch, dass Daten an den Server gesendet werden richtig? –

Ich habe dies als eine serverseitige Validierung zum Beispiel und nachdem ich zwei ok auf meinem Formular bekam, wird es nicht diese php Validierung warum –

Es verhindert, dass Daten an den Server gesendet werden - d. H. Formularübergabe - NUR, wenn ein Fehler vorliegt. Wenn nicht, wird das Formular gesendet. – Utkanos

$("#submit").click(function(){ 
    if ($('#user').text.length > 4){ 
      myfunction(); 
    }else{ 
    // show error message 
    } 
});

versuchen diese, auf Klick validiere nicht in der Funktion

Quelle

2016-05-31 11:35:40 Adrian

Das Formular wird nicht abgeschickt. – Utkanos

ok .. add (e) als Funktionsparameter und place on else - e.preventDefault() – Adrian

Try this one.. 



<!doctype html> 
    <html> 
    <head> 
     <title>form validation</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

     <script> 
      $(document).ready(function() { 


       function myfunction() 
       { 
        name = $("#user").val(); 
        nameError = $(".error").first(); 
        myError = ""; 
        if(name.length < 5 || name.length > 20){ 
         myError += "length should be between 5 and 20 "; 
         return false; 
        } 
        else{ 
         myError += "ok" 

        nameError.html(myError); 
        return true; 
        } 

       } 
      }); 
     </script> 

     <style> 
      .error 
      { 
       color : red; 
       text-transform: capitalize; 
       margin-left: 20px; 
      } 
     </style> 
    </head> 
    <body> 

     <form method="post" action="" onSubmit="return myFunction();"> 
      NAME : <input type="text" name="user" id="user"><span class="error"></span><br /> 
      <input type="submit" value="Submit" id="submit"> 
     </form> 

    </body> 
    </html>

Quelle

2016-05-31 11:37:46

Sie einfach eine Sache .Es ist sehr easy.Follow meine code.There keine Notwendigkeit von Javascript oder jQuery.Code ist getestet auf meinem PC.

<form method="post" action="" > 
    NAME : <input type="text" name="user" pattern="[A-Z a-z.]{5,20}" title="Enter your name between 5 and 20 charecters" required="required" accesskey="U"/><br /> 
    <input type="submit" value="Submit" id="submit">

Quelle

2016-05-31 11:49:03

wie man ein Formular beim Senden stoppt, ohne die Schaltfläche mit JQuery zu deaktivieren?

Antwort

Verwandte Themen