客戶端表單驗證

我在Joomla前端添加了一個新組件。在那裏，給出了一個表單，我使用JavaScript進行表單驗證，而不是Joomla行爲驗證，因爲我需要在一個範圍內打印錯誤消息。客戶端表單驗證

我的形式是：

<form action="" method="post" name="downloadtender" id="downloadtender" > 
    <br><br> 
    <fieldset> 
     Name:<br> 
     <input name='uname' type='text' id='uname' onblur='valid(this)' /><span id='inv' style="color: red;font-size: 12px;">*</span> 
     <br> 
     Designation:<br> 
     <input name='desig' type='text' id='desig' onblur='valid(this)'/><span id='inv' style="color: red;font-size: 12px;">*</span> 
     <br> 
     Company:<br> 
     <input name='comp' type='text' id='comp' onblur='valid(this)'/><span id='inv' style="color: red;font-size: 12px;">*</span> 
     <br> 
     Mobile Number:<br> 
     <input name='phone' type='text' id='phone' onblur='valid(this)'/><span id='inv' style="color: red;font-size: 12px;">*</span> 
     <br> 
     Email id:<br> 
     <input name='email' type='text' id='email' onblur='valid(this)'/><span id='inv' style="color: red;font-size: 12px;">* </span> 
     <br><br> 
     <input type="submit" name="submit1" value="Register" /> 
    </fieldset> 
    <?php echo JHTML::_('form.token'); ?> 
</form>

如何防止清除所有的錯誤消息之前提交表單？

編輯

<script type="text/javascript"> 

    function valid(elem){ 
     var input=[document.getElementById('uname'),document.getElementById('desig'),document.getElementById('comp'),document.getElementById('phone'),document.getElementById('email')]; 
     for(var i=0;i<input.length;i++){ 
      if(input[i].value==''&& elem.id==input[i].id){ 
       elem.focus(); 
       switch(input[i].id){ 
        case 'uname': 
         document.getElementById('uname-inv').innerHTML="*Field Required*"; 
         break; 
        case 'desig': 
         document.getElementById('desig-inv').innerHTML="*Field Required*"; 
         break; 
        case 'comp': 
         document.getElementById('comp-inv').innerHTML="*Field Required*"; 
         break; 
        case 'phone': 
         document.getElementById('phone-inv').innerHTML="*Field Required*"; 
         break; 
        case 'email': 
         document.getElementById('email-inv').innerHTML="*Field Required*"; 
         break; 
       } 
      } 
      else{ 
       switch(input[i].id){ 
        case 'uname': 
         document.getElementById('uname-inv').innerHTML=""; 
         break; 
        case 'desig': 
         document.getElementById('desig-inv').innerHTML=""; 
         break; 
        case 'comp': 
         document.getElementById('comp-inv').innerHTML=""; 
         break; 
        case 'phone': 
         document.getElementById('phone-inv').innerHTML=""; 
         break; 
        case 'email': 
         document.getElementById('email-inv').innerHTML=""; 
         break; 
       } 
      } 
     } 

     if(document.getElementById('email').value!=''){ 
      var t=document.getElementById('email'); 
      var x=t.value.indexOf('@'); 
      var y=t.value.lastIndexOf('.'); 
      if((x<1)||(y<x+2)||(y+2>t.length)){ 
       $er=1; 
       document.getElementById('email-inv').innerHTML="*Please provide correct email address*"; 
      } 
      else{ 
       document.getElementById('email-inv').innerHTML=""; 
      } 
     } 
    } 

</script>

來源

2013-10-22 user007

您有id="inv"多種元素，其中的ID必須是唯一的。

重命名跨度如下：

<span id="uname-inv" style="color: red;font-size: 12px;">*</span>

與JS

和參考：

case 'uname': 
    document.getElementById('uname-inv').innerHTML="*Field Required*"; 
    break;

請注意，這絕不是處理表單驗證優化的或理想的方式。看看使用jQuery Validation。

編輯：

爲了防止表單提交驗證失敗修改您的form元素如下：

<form action="" method="post" name="downloadtender" id="downloadtender" onsubmit="return validate()">

然後創建一個功能validate()將驗證您的所有領域，並返回true如果驗證如果驗證失敗，則通過或false。

來源

2013-10-22 09:48:53

客戶端表單驗證

回答

相關問題