表单在提交时不进入验证功能

时间：2018-07-25 19:26:38

标签： javascript html css

这是一个注册表单，输入所有值后，validation()必须验证输入，如果所有输入均有效，则应重定向到主页，但是我的表单在提交时未进入Javascript验证表格。

这是我的代码：

<!DOCTYPE html>
<html><head>
<style>
body {font-family: Arial, Helvetica, sans-serif;
background-color: black;}
* {box-sizing: border-box}

/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #C0C0C0;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: #ffbf00;
    outline: none;
}

hr {
    border: 1px solid #000000;
    margin-bottom: 25px;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: darkgreen;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 50%;
    opacity: 0.9;
}

button:hover {
    opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
    padding: 14px 20px;
    background-color: #f44336;
}


/* Add padding to container elements */
.container {
    padding: 16px;
    background-color: white;
}

/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}



    .signupbtn {
       width: 50%;

    }

</style>

<script type="text/javascript">
function validation() {

    alert('in..');
    var uname = document.signup_form.username.value;
    var mail= document.signup_form.email.value;
    var num= document.signup_form.phone.value;
    var pass= document.signup_form.psw.value;
    var des= document.signup_form.desg.value;

    alert('validating...');
    if allLetter(uname){
    if ValidateEmail(mail){
    if check_phonenumber(num){
    if CheckPassword(pass){
    if desgselect(des){
    }
    }
    }
    }
    }
    return false;
    }

function allLetter(uname)
{ 
    alert('validating username');
    var letters = /^[A-Za-z]+$/;
    if(uname.value.match(letters))
        {
            alert('corret name');
            return true;
        }
    else
        {
            alert('Username must have alphabet characters only');
            uname.focus();
            return false;
        }
}

function ValidateEmail(mail) 
{
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(signup_form.email.value))
  {
    alert('valid mail ID');
    return (true)
  }
    alert("You have entered an invalid email address!");
    return (false)
}

function check_phonenumber(num)
{
  var phoneno = /^\d{10}$/;
  if((num.value.match(phoneno))
        {
        alert('valid phone number');
      return true;
        }
      else
        {
        alert("invalid phone number");
        return false;
        }
}

function CheckPassword(pass) 
{ 
var passw=  /^[A-Za-z]\w{7,15}$/;
if(pass.value.match(passw)) 
{ 
alert('Correct, try another...');
return true;
}
else
{ 
alert('Wrong...!');
return false;
}
}

function desgselect(des)
{
if(des.value == "Default")
{
alert('Select your designation from the list');
desg.focus();
return false;
}
else
{
alert('selected correct designation');
return true;
}
}

//}


</script>
</head>
<body>

<form name="signup_form" onsubmit="return validation()" action="main.html" method="post" style="border:1px solid #ccc">
  <div class="container">
    <h1><center>Sign Up</center></h1>
    <p><center>Please fill in this form to create an account.</center></p>
    <hr>
    <label for="username"><b>Name</b></label>
    <input type="text" placeholder="Enter your full name" name="username" required>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>
    <label for="phone"><b>Phone</b></label>
    <input type="text" id="phone" name="phone" placeholder="Enter your mobile number" required><br>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

   <label for="desg"><b>Designation</b></label>
   <select name="desg">
    <option selected="" value="Default">(Please select your designation)</option>
    <option value="am">Asst. Manager</option>
    <option value="dm">Department Manager</option>
    <option value="mm"> Mart Manager</option>
    <option value="sp">Sales Person</option>
    </select><br>

    <br><label><b>Gender</b>
      <input type="radio" name="gender" value="male" > Male
       <input type="radio" name="gender" value="female"> Female<br>
    </label>

    <p><center>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</center></p>

    <div class="clearfix" align="center">

      <button type="submit" class="signupbtn" onclick="validation(this.signup_form);"><b>Join Us</b></button>
    </div>
  </div>
</form>

</body>
</html>

我尝试了所有可能的方法，但无法解决问题。

2 个答案:

答案 0 :(得分：0)

当表单中的按钮类型为=“ submit”时，单击“提交”按钮将刷新页面。 因此，即使执行了验证功能，您也看不到错误或成功消息。

您需要做的是通过验证方法中的event.preventDefault（）防止这种默认行为，或者将按钮的类型更改为按钮。

在您的情况下，将按钮type="submit"更改为type="button"。

答案 1 :(得分：0)

您的代码中有许多语法错误，导致其无法执行。

您还应该使用addEventListener而不是嵌入式onsubmit事件处理程序。

<!DOCTYPE html>
<html><head>
<style>
body {font-family: Arial, Helvetica, sans-serif;
background-color: black;}
* {box-sizing: border-box}

/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #C0C0C0;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: #ffbf00;
    outline: none;
}

hr {
    border: 1px solid #000000;
    margin-bottom: 25px;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: darkgreen;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 50%;
    opacity: 0.9;
}

button:hover {
    opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
    padding: 14px 20px;
    background-color: #f44336;
}


/* Add padding to container elements */
.container {
    padding: 16px;
    background-color: white;
}

/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}



    .signupbtn {
       width: 50%;

    }

</style>

<script type="text/javascript">
function validation() {

    alert('in..');
    var uname = document.signup_form.username.value;
    var mail= document.signup_form.email.value;
    var num= document.signup_form.phone.value;
    var pass= document.signup_form.psw.value;
    var des= document.signup_form.desg.value;

    alert('validating...');
    if (allLetter(uname)&&ValidateEmail(mail)&&check_phonenumber(num)&&CheckPassword(pass)&&desgselect(des)){
    return true;
    } 
    return false;
    }

function allLetter(uname){ 
    alert('validating username');
    var letters = /^[A-Za-z]+$/;
    if(uname.match(letters))        {
            alert('corret name');
            return true;
        }else{
            alert('Username must have alphabet characters only');
            return false;
        }
}

function ValidateEmail(mail){
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(signup_form.email.value)){
    alert('valid mail ID');
    return (true);
  }
    alert("You have entered an invalid email address!");
    return (false);
}

function check_phonenumber(num){
  var phoneno = /^\d{10}$/;
  if(num.match(phoneno)){
        alert('valid phone number');
      return true;
     } else{
        alert("invalid phone number");
        return false;
        }
}

function CheckPassword(pass){ 
var passw=  /^[A-Za-z]\w{7,15}$/;
if(pass.match(passw)) { 
alert('Correct, try another...');
return true;
}else{ 
alert('Wrong...!');
return false;
}
}

function desgselect(des){
if(des == "Default"){
alert('Select your designation from the list');
desg.focus();
return false;
}else{
alert('selected correct designation');
return true;
}
}

//}
window.onload = function(){
document.getElementById("signupform").addEventListener("submit", function(e){
 validation();
});
}
</script>
</head>
<body>

<form id="signupform" name="signup_form" action="main.html" method="post" style="border:1px solid #ccc">
  <div class="container">
    <h1><center>Sign Up</center></h1>
    <p><center>Please fill in this form to create an account.</center></p>
    <hr>
    <label for="username"><b>Name</b></label>
    <input type="text" placeholder="Enter your full name" name="username" required>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>
    <label for="phone"><b>Phone</b></label>
    <input type="text" id="phone" name="phone" placeholder="Enter your mobile number" required><br>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

   <label for="desg"><b>Designation</b></label>
   <select name="desg">
    <option selected="" value="Default">(Please select your designation)</option>
    <option value="am">Asst. Manager</option>
    <option value="dm">Department Manager</option>
    <option value="mm"> Mart Manager</option>
    <option value="sp">Sales Person</option>
    </select><br>

    <br><label><b>Gender</b>
      <input type="radio" name="gender" value="male" > Male
       <input type="radio" name="gender" value="female"> Female<br>
    </label>

    <p><center>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</center></p>

    <div class="clearfix" align="center">

      <button type="submit" class="signupbtn" onclick="validation(this.signup_form);"><b>Join Us</b></button>
    </div>
  </div>
</form>

</body>
</html>

相关问题
最新问题