양식이 PHP 유효성 검사 전에 제출됩니다

Question

제출할 양식이 있으므로 제출을 클릭하면 selectorpage.php로 이동하여 선택한 기능 유형을 찾습니다. 로그인하고, 컨트롤러를 호출하여 해당 기능을 실행합니다. 내가 가진 문제는 js에 validateForm()이라는 함수가 있다는 것입니다. submit 버튼을 클릭하자마자 selectorPage.php로 이동합니다. 양식 제출을 중단하고 js를 통해 유효성 검사를 수행 한 다음 양식을 제출하려면 onsubmit = return false를 사용했습니다. 양식 태그에 있지만 더 이상 아무것도 수행하지 못하도록 막아줍니다. 또한 어떻게 든 js에서 작동하는 경우 selectorPage로 양식을 리디렉션하는 방법을 모르겠습니다. 그래서 누구나 js에서 양식을 제출하고 그 페이지를 selectorPage.php로 리디렉션하는 방법을 나에게 알리고 싶습니다. 감사합니다

<form method="post" action="selector.php?type=login" id="login" id="loginForm"> 
     <div class="row"> 
      <div class="offset1 span1">    
       <div class="lbel"> 
        <label class="control-label" for "loginName"> 
          Username/Email 
        </label> 
       </div> 
       <div class="lbl_inpuCnt"> 
         <input type="text" class="input-xlarge" id="loginName" 
          name="loginName" maxlength="50"/> 
       </div> 
       <div id="usernameError">&nbsp;</div> 
       <div class="lbel"> 
         <label class="control-label" for="loginPassword"> 
          Password 
         </label> 
       </div> 
       <div class="controls"> 
         <input type="password" class="input-xlarge" 
           id="loginPassword" name="loginPassword" 
           maxlength="50"/> 
       </div> 
       <div id="passwordError">&nbsp;</div><br/> 
      </div> 
     </div> 
     <div style="margin-left: 55px;"> 
      <input class="btn" style="width: 80px;" type="reset" 
        name="reset" value="Reset"/> 
      <input class="btn" style="width: 80px;" type="submit" 
        name="submit" value="Login" onclick="validateForm();"/> 
     </div> 
</form> 

이

function validateForm(){ 
    form = document.forms['loginForm']; 
    if(document.getElementById('loginName').value == "") 
     document.getElementById('usernameError').innerHTML = 'Invalid username or email'; 
    else{ 
     document.getElementById('usernameError').innerHTML = "&nbsp";  
    form.submit(); 
    } 
} //suppose it for the email validation only for the time being 

Answer 1

인라인 이벤트 처리를 사용하여 표준 방법입니다 자바 스크립트 - 더 아래 방법을 참조 눈에 거슬리지 않게 만들 수 있습니다. 또한 단지도

<form id="loginform" ... onsubmit="return validate(this)"> 

<div style="margin-left: 55px;"> 
    <input class="btn" style="width: 80px;" type="reset" name="reset" value="Reset" onclick="clearFields()"/> 
    <input class="btn" style="width: 80px;" type="submit" value="Login" /> 
</div> 
</form> 

이 자바 스크립트

이다 (당신이해야 할 노력 무엇이다)가 예약 된 단어 형태로 아무것도 submit를 호출하지 않고 스크립트에 의해 제출 차단 마십시오, 폼 태그의 ONE ID를 가지고

function validateForm(form){ // passing form object 
    document.getElementById('usernameError').innerHTML = ""; // reset 

    if (form.loginName.value == "") { 
    document.getElementById('usernameError').innerHTML = "Invalid username"; 
    return false; 
    } 
    return true;// allow submission 
} 

---

대체

<form id="loginform" ..... No event handler here ...> 

스크립트 :

window.onload=function() { 
    document.getElementById("loginform").onsubmit=function() { 
    document.getElementById('usernameError').innerHTML = ""; // reset 

    if (this.loginName.value == "") { // notice the "this" 
     document.getElementById('usernameError').innerHTML = "Invalid username"; 
     return false; 
    } 
    return true;// allow submission 
    } 
} 

Answer 2

위의 코드에 따라 당신이 오류가있는 경우 따라 validateForm() 기능을 사용

return true/false 

에서

<form ... onsubmit="return validateForm();" 

을 시도 할 수있는 자바 스크립트입니다 녹이다.

Answer 3

저는 과거에 이와 비슷한 문제가있었습니다.

양식의 '로그인'버튼을 클릭하면 'validateForm();'을 호출하는 두 개의 개별 이벤트가 트리거됩니다. 자바 스크립트 함수 및 폼 자체의 제출. 여기에서 문제는 양식을 제출하면 브라우저가 양식 대상으로 아웃 바운드 요청을 보내고, 자바 스크립트를 사용하여 요청 이벤트가 일단 트리거되면이를 죽일 방법이 없다는 것입니다.

'onsubmit = return false;'를 사용하면 현재 수행중인 작업을 정확하게 수행하고 있습니다. - 현재 자바 스크립트 범위를 종료하고 해당 특정 이벤트와 연결된 자바 스크립트가 더 이상 실행되지 못하도록합니다. 그러나 불행하게도, 폼 자체의 제출은 가능하면 javascript를 통해 트리거하고 제어 할 수 있지만 실제로는 javascript로 처리되지 않으며 javascript 함수 자체가 아닙니다.

내 경험에 의하면 가장 좋은 해결책은 '제출'유형 입력 대신 '버튼'유형 입력을 사용하는 것입니다. '제출'과 '버튼' 하지만 '버튼'에는 실제로 기본적으로 연결된 이벤트 액션이 없습니다 (따라서 클릭 할 때 실제로 아무 것도하지 않습니다). - 이것이 의미하는 것은 이벤트 핸들러 (예 : 'onclick' '끝났습니다'), 사용자가 '버튼'을 클릭 할 때 일어나는 일을 완전히 제어 할 수 있습니다.

'validateForm();'을 (를) 포함하지 않았습니다. javascript 함수는 여기에 포함되어 있는지 모르겠지만, 이미 그렇게하지 않았다면, 자바 스크립트 함수를 통해 양식을 제출하는 코드를 포함 시켜서 유효성 검사가 성공하면 (또는 반환 할 때 양식을 제출해야합니다. 검증에 실패하면 사람이 읽을 수있는 오류가 발생합니다.) - '제출'대신 '버튼'을 사용하면 문제가 해결됩니다.

희망이 도움이됩니다. :)

편집 : 내 초기 답장을 한 직후의 생각. 일부 브라우저는 제출 입력 유형을 통해 양식을 제출하기 전에 'onclick'과 같은 이벤트 핸들러를 처리합니다. 그러나, 나는 어떤 오래된 브라우저가 이것을 현재하지 않는다는 것을 발견했다.양식 제출 전에 처리 된 이벤트 핸들러의 결과를 따르는 최신 브라우저의 경우 유효성 검증이 실패 할 경우 두 번째 이벤트 (양식 제출)가 전혀 발생하지 않도록 할 수 있어야합니다. 그러나 모든 브라우저가 이러한 결과를 존중하지는 못합니다. 일부 결과는 그 결과에 관계없이 양식을 계속 제출할 것입니다.

Answer 4

아니라 감사 U 모든, 그래서 마침내 내가 여기 당신의 아이디어에 의해 솔루션은 내가) ( 오히려 퍼팅 반환 formvalidate했을 것입니다 발견; 기능 나는 이것이

<div style="margin-left: 55px;"> 
        <input class="btn" style="width: 80px;" type="reset" name="reset" value="Reset" onclick="clearFields()"/> 
        <input class="btn" style="width: 80px;" type="submit" name="submit" value="Login" onclick="return validateForm();"/> 
       </div> 

을가에서 온 클릭 이벤트를 제출하고 매력처럼 실행 ... 덕분에 넣어 여기

function validateForm(){ 
    var form = document.forms['loginForm']; 
    if(document.getElementById('loginName').value == "") 
     document.getElementById('usernameError').innerHTML = 'Invalid username or email'; 
    else{ 
     form.submit(); 
    } 
    return false; 
}