表单在php中验证之前提交

Question

I have a form which I want to submit, so when I click on submit it goes to the selectorpage.php and finds the selected function type e.g. login in this, which further calls the controller to execute the function. Issue I have is that there is a function called validateForm() in js, as soon as I click the submit button, it goes to the selectorPage.php. I wanted to stop the form submission, perform validation through js and then submit the form from there, I used onsubmit = return false; in form tag but it just blocks the form of doing anything further. And I also don't know how to redirect the form to the selectorPage if it somehow works in js. So anybody would like to give me an idea how to submit form from js and then redirect that page to selectorPage.php. Thanks

<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>

this is the javascript according to the code above

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

Here is the canonical way using inline event handling - see further down how it could be made unobtrusive. Also only have ONE id on the form tag, also NEVER call anything submit in a form it is a reserved word and will block submitting by script (which is what you tried to do)

<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>

this is the javascript

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
}

---

Alternative

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

Script:

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
  }
}