Kann das Formular nicht stoppen submiting trotz Validierung JS mit

Question

Wenn Button senden Sie das Formular geht an die Aktionsseite „formsubmit.html“ ohne nichts Füllung ...

HTML:

<form name="myForm" action="formsubmit.html" method="POST" enctype="multipart/form-data" onsubmit="return validateForm()"> 

JAVASCRIPT (JQuery):

$(function() { 

function validateForm() { 
    var name = document.forms["myForm"]["fname"].value; 
    if (name == null || name == "") { 
     alert("Name must be filled out"); 
     return false; 
    } 
    var email = document.forms["myForm"]["email"].value; 
    if (email == null || email == "") { 
     alert("email required"); 
     return false; 
    } 
    var phone = document.forms["myForm"]["phone"].value; 
    if (phone == null || phone == "") { 
     alert("please enter a valid phone number"); 
     return false; 
    } 
    var subject = document.forms["myForm"]["subject"].value; 
    if (subject == null || subject == "") { 
     alert("You forgot your message!"); 
     return false; 

     } 
    } 
}); 

Answer 1

Ihre Funktion ist innerhalb einer ungenannten Funktion Schließung, so hat er global definiert werden:

// global scope 

function validateForm() { 
    var name = document.forms["myForm"]["fname"].value; 
    if (name == null || name == "") { 
     alert("Name must be filled out"); 
     return false; 
    } 
    var email = document.forms["myForm"]["email"].value; 
    if (email == null || email == "") { 
     alert("email required"); 
     return false; 
    } 
    var phone = document.forms["myForm"]["phone"].value; 
    if (phone == null || phone == "") { 
     alert("please enter a valid phone number"); 
     return false; 
    } 
    var subject = document.forms["myForm"]["subject"].value; 
    if (subject == null || subject == "") { 
     alert("You forgot your message!"); 
     return false; 

     } 
    } 

Answer 2

Sie benötigen die validateForm() Funktion außerhalb des jQuery-Block zu bewegen, wie Sie ein on* Ereignishandler verwenden. Wenn Sie die Konsole überprüfen, erhalten Sie wahrscheinlich einen Fehler, der besagt, dass Ihre Funktion nicht definiert ist, da sie außerhalb des Bereichs liegt. Versuchen Sie folgendes:

function validateForm() { 
    var name = document.forms["myForm"]["fname"].value; 
    if (name == null || name == "") { 
     alert("Name must be filled out"); 
     return false; 
    } 
    var email = document.forms["myForm"]["email"].value; 
    if (email == null || email == "") { 
     alert("email required"); 
     return false; 
    } 
    var phone = document.forms["myForm"]["phone"].value; 
    if (phone == null || phone == "") { 
     alert("please enter a valid phone number"); 
     return false; 
    } 
    var subject = document.forms["myForm"]["subject"].value; 
    if (subject == null || subject == "") { 
     alert("You forgot your message!"); 
     return false; 
    } 
} 

$(function() { 
    // jQuery code here.. 
}); 

noch besser, loszuwerden, die veraltete on* Attribut und binden Ihre Veranstaltungen unaufdringlich JS-Code.

<form name="myForm" id="myForm" action="formsubmit.html" method="POST" enctype="multipart/form-data"> 

$(function() { 
    $('#myForm').submit(function(e) { 
     var name = $('#fname').val().trim(); 
     if (name == null || name == "") { 
      e.preventDefault(); 
      alert("Name must be filled out"); 
     } 

     var email = $('#email').val().trim(); 
     if (email == null || email == "") { 
      e.preventDefault(); 
      alert("email required"); 
     } 

     var phone = $('#phone').val().trim(); 
     if (phone == null || phone == "") { 
      e.preventDefault(); 
      alert("please enter a valid phone number"); 
     } 

     var subject = $('#subject').val().trim(); 
     if (subject == null || subject == "") { 
      e.preventDefault(); 
      alert("You forgot your message!"); 
     } 
    } 
});