使用JavaScript驗證文本字段和複選框

Question

我正在嘗試使用完整的「驗證窗體」功能。我唯一缺少的兩件事情：

1. 要限制名稱字段隻字母字符和空格
2. 爲了驗證至少有一個複選框被選中，最大的7個複選框允許

這是我到目前爲止...複選框驗證似乎被繞過，我不確定是否因爲我沒有在「onSubmit」中調用函數....這就是爲什麼我想要「one」full code，

至於名稱驗證，我是不知道如何將此代碼放置在validateform3函數 內或至少將其與表單關聯，複選框驗證也是如此。

名稱驗證JS

function englishonly(inputtxt) 
{ 
    var letters = /^[A-Za-z]+$/; 
    if(inputtxt.value.match(letters)) 
    {  
     return true; 
    } 
    else 
    { 
     alert('Please type your name in english'); 
     return false; 
    } 
} 

JAVASCRIPT

<script type="text/javascript"> 
    function validateForm3() {      
     if (studentid.value == "") 
     { 
      studentid.style.borderColor = '#ff0000'; 
      alert("Please enter your Student ID"); 
      studentid.focus(); 
      return false; 
     } 

     var x=document.forms["form3"]["studentid"].value; 
     if (! /^[0-9]{11}$/.test(x)) { 
      studentid.style.borderColor = '#ff0000'; 
      studentid.style.backgroundColor = "#fdf0af"; 
      alert("The Student ID you entered is incorrect."); 
      return false; 
     } 

     if (Email.value == "") 
     { 
      Email.style.borderColor = '#ff0000'; 
      alert("Please enter your e-mail"); 
      Email.focus(); 
      return false; 
     } 
     var x=document.forms["form3"]["Email"].value; 
     if (x.indexOf("@")=== -1) 
     { 
      Email.style.borderColor = '#ff0000'; 
      Email.style.backgroundColor = "#fdf0af"; 
      alert("Please enter a valid email"); 
      return false; 
     } 

     if (Name.value == "") 
     { 
      Name.style.borderColor = '#ff0000'; 
      alert("Please enter your Name in English"); 
      Name.focus(); 
      return false; 
     }          
    } 
</script> 

<script type="text/javascript"> 
    $(document).ready(function() {  
     $("#Regestir").click(function() { 
      var numberOfChecked = $('input:checkbox:checked').length; 
      // $.isNumeric($("#studentid").val()) 
      if($("#studentid").val()!="" && $("#studentid").val()!="" && $("#Email").val()!="" && $("#Name").val()!="") 
      {          
       if (numberOfChecked == 0 || numberOfChecked>7) 
       { 
        alert("Only 7 courses are allowed."); 
        $("form").submit(function(e){ 
         e.preventDefault(); 
        }); 
       } 
       else 
        $("form").unbind('submit').submit(); 
        //$("#form3").submit();     
      } 
      else 
      { 
       alert ("You should enter all form values"); 
       $("form").submit(function(e){ 
        e.preventDefault(); 
       }); 
      } 
     }); 
    }); 
</script> 

HTML

<form action="connect.php" method="get" id="form3" 
     name="form3" onsubmit="return validateForm3()"> 

Answer 1

要獲得選中的複選框的總數，取代你

var numberOfChecked = $('input:checkbox:checked').length; 

與

var numberOfChecked = $('input:checkbox[name=type]:checked').length; 

至於你的姓名驗證englishonly功能你的問題，你可以直接調用它您的validateform3功能。如果該函數的代碼來自不同的文件，則必須包含該js文件。然後你的代碼可以是這個樣子：

function validateform3(){ 
    // .... 
    var valid_english_name = englishonly($('#name')); // or whatever your 'name' input ID is 
} 

一點題外話，如果你想取消表單提交由於一些驗證錯誤，您可以只使用e.preventDefault();或return false;沒有重新綁定的submit事件處理程序。

此外，像studentid.value和Email.value等代碼可能無法正常工作。既然你使用的是jQuery，你可以用jquery selectors替換它們。

希望這會有所幫助。

Answer 2

這裏有一個FIDDLE供您思考。

JS

var inputname, length1, length2, checkboxcount = 0; 
$('.clickme').on('click', function() { 
    inputname = $('.myname').val(); 
    length1 = inputname.length; 
    length2 = inputname.replace(/[^a-zA-Z\s]/gi, '').length; 
    if (length1 != length2) 
     { 
     $('#errorspan').append('Only letters are allowed in a name'); 
     validname = 0; 
     } 
    else 
     { 
     validname = 1; 
     } 
    $('.checkme').each(function(){ 
     if($(this).is(':checked')) 
     { 
     checkboxcount = checkboxcount + 1; 
     } 
    }); 
    if(checkboxcount < 1) 
    { 
      $('#errorspan').append('At least one checkbox must be checked'); 
      validbox = 0; 
    } 
    else if(checkboxcount > 6) 
    { 
      $('#errorspan').append('No more than 6 checkboxes can be checked'); 
      validbox = 0; 
    } 
    else{ 
     validbox = 1; 
    } 

    if (validname === 1 && validbox == 1) 
    { 
     alert("Everything Valid"); 
     } 
    else 
    { 
    alert("Not Valid! You have work to do!"); 
    } 
});