Question

我在驗證表單時遇到問題。當我點擊「Valider」按鈕時，似乎功能驗證不起作用。

下面是HTML：

<form method='POST' action='newcustomer.php' id='registerform' class='formulaire' onsubmit="return validation();" > 

    <p> 
    <label for='firstname'>First Name</label> 
    <input type='text' id ='firstname' name='firstname' placeholder='First Name' class='text' /> 
    </p> 

    <p> 
    <label for='lastname'>Last Name</label> 
    <input type='text' id ='lastname' name='lastname' placeholder='Last Name' class='text' /> 
    </p> 

    <p> 
    <label for='age'>Age</label> 
    <input type='number' id='age' name='age' placeholder='Age' class='text' min='5' max='99'/> 
    </p> 

    <p> 
    <label for='email'>Email</label> 
    <input type='text' id='email' name='email' placeholder='Email' class='text' /> 
    </p> 

    <p> 
    <label for='password'>Password</label> 
    <input type='password' id='password' name='password' size='35' placeholder='Password' class='text' /> 
    </p> 

    <p> 
    <input type='submit' value='Valider' id='registerbutton'/> 
    </p> 
</form> 

這裏是JavaScript：

$(document).ready(
    function() { 
    $('#firstname').keyup(function() { 
     checkfname(); 
    }); 

    $('#lastname').keyup(function() { 
     checklname(); 
    }); 

    $('#age').keyup(function() { 
     checkage(); 
    }); 

    $('#email').keyup(function() { 
     checkemail(); 
    }); 

    $('#password').keyup(function() { 
     checkpassword(); 
    }); 

    function checkfname() { 
     $('span.error-firstname').remove(); 
     var inputVal = $('#firstname').val(); 
     var numericReg = /^[A-Za-z éàèïöäëüâêôûî]+$/; 
     if(!numericReg.test(inputVal)) { 
      $('#ok1').animate({opacity: 0}, {duration: 200}); 
      $('#ko1').animate({opacity: 1}, {duration: 200}); 
      $('#firstname').after('<span class="error error-firstname">Name contains only letters</span>'); 
      return false; 
     } else { 
      $('#ko1').animate({opacity: 0}, {duration: 200}); 
      $('#ok1').animate({opacity: 1}, {duration: 200}); 
      return true; 
     } 
    } 

    function checklname() { 
     $('span.error-lastname').remove(); 
     var inputVal = $('#lastname').val(); 
     var numericReg = /^[A-Za-z éàèïöäëüâêôûî]+$/; 
     if(!numericReg.test(inputVal)) { 
      $('#ok2').animate({opacity: 0}, {duration: 200}); 
      $('#ko2').animate({opacity: 1}, {duration: 200}); 
      $('#lastname').after('<span class="error error-lastname">Name contains only letters</span>'); 
      return false; 
     } else { 
      $('#ko2').animate({opacity: 0}, {duration: 200}); 
      $('#ok2').animate({opacity: 1}, {duration: 200}); 
      return true; 
     } 
    } 

    function checkage() { 
     $('span.error-age').remove(); 
     var inputVal = $('#age').val(); 
     var numericReg = /^[0-9]{1,}$/; 
     if(!numericReg.test(inputVal)) { 
      $('#ok3').animate({opacity: 0}, {duration: 200}); 
      $('#ko3').animate({opacity: 1}, {duration: 200}); 
      $('#age').after('<span class="error error-age">Enter a valid age (between 5 and 99)</span>'); 
      return false; 
     } else { 
      $('#ko3').animate({opacity: 0}, {duration: 200}); 
      $('#ok3').animate({opacity: 1}, {duration: 200}); 
      return true; 
     } 
    } 

    function checkemail() { 
     $('span.error-email').remove(); 
     var inputVal = $('#email').val(); 
     var numericReg = /^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/; 
     if(!numericReg.test(inputVal)) { 
      $('#ok4').animate({opacity: 0}, {duration: 200}); 
      $('#ko4').animate({opacity: 1}, {duration: 200}); 
      $('#email').after('<span class="error error-email">Enter a valid Email</span>'); 
      return false; 
     } else { 
      $('#ko4').animate({opacity: 0}, {duration: 200}); 
      $('#ok4').animate({opacity: 1}, {duration: 200}); 
      return true; 
     } 
    } 

    function checkpassword() { 
     $('span.error-password').remove(); 
     var inputVal = $('#password').val(); 
     var numericReg = /^[a-z0-9_-]{6,18}$/; 
     if(!numericReg.test(inputVal)) { 
      $('#ok5').animate({opacity: 0}, {duration: 200}); 
      $('#ko5').animate({opacity: 1}, {duration: 200}); 
      $('#password').after('<span class="error error-password">The password must contain a letter, a number and at least 6 characters</span>'); 
      return false; 
     } else { 
      $('#ko5').animate({opacity: 0}, {duration: 200}); 
      $('#ok5').animate({opacity: 1}, {duration: 200}); 
      return true; 
     } 
    } 

    function validation() { 
     var bfname = checkfname(); 
     var blname = checklname(); 
     var bage = checkage(); 
     var bmail = checkemail(); 
     var bpassword = checkpassword(); 

     if (bfname == true && blname == true && bage == true && bmail == true && bpassword == true){ 

      return true; 
     } 
     else { 
      return false; 
     } 
    } 
} 

的問題在於驗證功能沒有呼籲表單標籤的參數的onsubmit。我試圖把一個錯誤窗口看看是否調用了該函數，但消息從不顯示。

您認爲問題來自哪裏？

Answer 1

嗯，兩週前我有同樣的錯誤。 您需要放棄.ready（）函數的驗證功能。 否則，您應該在.ready（）函數的元素窗體上使用.sumbit（）jquery函數。