2013-10-22 4 views
0

좋아요, 그래서 jQuery로 폼 유효성 검사를하려고합니다. 이유를 모르지만 제출을 클릭하면 이미있는 페이지로 리디렉션됩니다.jQuery로 양식 유효성 검사 - 이상한 리디렉션

양식 작업이 비어 있으며 헤더에 javascript 파일이 포함되어 있습니다.

아래 코드를 입력 해 보겠습니다. 네가 틀린 것을 보게되면 알려줘. jQuery로 유효성을 검사 한 다음 POST 메서드에서 해당 값을 사용하여 PHP 파일로 보냅니다.

Register.js :

$(document).ready(function() { 
    $('button[name=regsubmit]').click(function(){ 
    var fname = $('input[name=regfirstname'); 
    var lname = $('input[name=reglastnaame'); 
    var email = $('input[name=regemail'); 
    var password = $('input[name=regpassword'); 
    var repeatpassword = $('input[name=regrepeatpassword'); 
    var username = $('input[name=regusername'); 
    var atpos = email.indexOf("@"); 
    var dotpos = email.indexOf("."); 
    if (fname==null || fname=="") 
     { 
     alert('First name must be filled out!'); 
     return false; 
     } 
    if (lname==null || lname=="") 
     { 
     alert('Last name must be filled out!'); 
     return false; 
     } 
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) 
     { 
     alert('Not a valid e-mail address!'); 
     return false; 
     } 
    if (username==null || username=="") 
     { 
     alert("Username field must be filled out!"); 
     return false; 
     } 
    if (password==null || password=="") 
     { 
     alert("Subject field must be filled out!"); 
     return false; 
     } 
    if (repeatpassword==null || repeatpassword=="") 
     { 
     alert("Repeat password field must be filled out!"); 
     return false; 
     } 
    if (password != repeatpassword) 
     { 
     alert("The passwords do not match!"); 
     return false; 
     } 
    else 
    { 
    location.href="register.php"; 
    } 
    }); 
}); 

형태 :

   <form name="register" method="POST"> 
       <fieldset> 
        <div class="form-container row-fluid"> 
        <div class="span6"> 

         <div class="control-group"> 
         <label class="control-label" for="regfirstname">First Name</label> 
         <div class="controls"> 
          <input id="regfirstname" tabindex="1" name="regfirstname" type="text" placeholder="First Name" class="input-large" required> 
         </div> 
         </div> 

         <div class="control-group"> 
         <label class="control-label" for="regusername">Username</label> 
         <div class="controls"> 
          <input id="regusername" tabindex="3" name="regusername" type="text" placeholder="Username" class="input-large" required> 
         </div> 
         </div> 



         <div class="control-group"> 
         <label class="control-label" for="regpassword">Password</label> 
         <div class="controls"> 
          <input id="regpassword" tabindex="5" name="regpassword" type="password" placeholder="Password" class="input-large"> 
         </div> 
         </div> 
          <div class="controls"> 
          <button id="regsubmit" tabindex="7" name="regsubmit" class="button background-asbestos">Submit</button> 
          </div> 
        </div><!-- .span6 --> 

        <div class="span6"> 

         <div class="control-group"> 
         <label class="control-label" for="reglastname">Lastname</label> 
         <div class="controls"> 
          <input id="reglastname" tabindex="2" name="reglastname" type="text" placeholder="Lastname" class="input-large" required> 
         </div> 
         </div> 

         <div class="control-group"> 
         <label class="control-label" for="regemail">Email</label> 
         <div class="controls"> 
          <input id="regemail" name="regemail" tabindex="4" type="text" placeholder="[email protected]" class="input-large"</td> 
         </div> 
         </div> 

         <div class="control-group"> 
         <label class="control-label" for="regrepeatpassword">Repeat Password</label> 
         <div class="controls"> 
          <input id="regrepeatpassword" tabindex="6" name="regrepeatpassword" type="password" placeholder="Repeat Password" class="input-large" required> 
         </div> 
         </div> 
         <!-- .span6 --> 
        <!-- span6 --> 
        </div><!-- .row-fluid --> 
       </fieldset> 
       </form> 
+0

양식 동작이 비어있는 경우 기본 동작은 현재 사용중인 것과 동일한 페이지에 '제출'하는 것입니다.> http://www.w3.org/TR/html401/interact/forms.html#adef-action – PlantTheIdea

+0

그렇다면 나는 무엇을 할 것인가? register.js? – user2839430

+0

TO를 제출 하시겠습니까? 어떤 페이지가 서버로 보낼 정보를 처리하고 있습니까? – PlantTheIdea

답변

0

가 기본 동작을 방지

$('button[name=regsubmit]').click(function(e) 
{ 
    e.preventDefault(); 

//your code below  

} 
1

좋아 당신의 JS를 입력하고 HTML 물건의 큰 혼란, 그래서 모든 것을 다시 만들지는 않지만 기초 :

양식에게 ID 부여

:

<form id="SomeForm" name="register" method="POST"> 

그런 다음 기본 동작을 방지하고 제출을 경우 패스 :

// reference the button by the ID you gave it 
$('#regsubmit').click(function(e){ 
    // stop original submission 
    e.preventDefault(); 

    // all your checking stuff here, but if true, then: 
    document.getElementById('SomeForm').submit(); 
}); 

이것은 당신이 제대로 단추를 참조 제대로 제출을 방지에만 유효한 경우 제출되는 것을 보장 .

+0

다음에 작업을 추가합니까? 아니면 register.php로 어디서 리다이렉트를 할 것인가? 이렇게 추가하면 페이지가 새로 고쳐집니다. – user2839430

+0

액션을 register.js 페이지로 추가해야합니다. –

+0

그러면 register.php로 어떻게 리디렉션됩니까? register.js로 시도해 보았고 스크립트의 코드를 보여주는 register.js로 리다이렉트했다. – user2839430