클라이언트 측 폼 유효성 확인

Joomla 프런트 엔드에 새 구성 요소를 추가하고 있습니다. 거기에 폼이 주어지고 나는 Joomla Behavior Validation 대신 form validation을 위해 JavaScript를 사용한다. 왜냐하면 나는 span에서 에러 메시지를 출력해야하기 때문이다.클라이언트 측 폼 유효성 확인

내 형식은 다음과 같습니다

나는 모든 오류 메시지를 삭제하기 전에 양식을 방지 할 수있는 방법

<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 년대는 고유해야합니다 id="inv" 여러 요소가 있습니다. 당신의 JS와

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

및 참조 : 다음과 같이

은 스팬의 이름을 변경

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

이 있습니다,이 양식 유효성 검사를 처리 최적화 또는 이상적인 방법 거리가 멀다. jQuery Validation을 사용하십시오.

편집 :

는 다음과 같이 form 요소를 수정 검증 실패에 양식 제출을 방지하기위한 방법은 다음과 같습니다 검증 경우

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

그런 다음 모든 필드를 확인하고 true를 반환하는 함수 validate()를 만들 검증이 실패하면 false이 전달됩니다.

출처

2013-10-22 09:48:53

클라이언트 측 폼 유효성 확인

답변

관련 문제