堆棧內存溢出
  簡體   English   中英

表單在提交時不進入驗證功能

[英]Form not going into validation function onsubmit

 原文  2018-07-25 19:26:38  3   2    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 個解決方案

解決方案1
 0  2018-07-25 19:34:15

當表單中的按鈕類型為=“ submit”時，單擊“提交”按鈕將刷新頁面。 因此，即使執行了驗證功能，您也看不到錯誤或成功消息。

您需要做的是通過驗證方法中的event.preventDefault（）防止這種默認行為，或者將按鈕的類型更改為button。

在您的情況下，將按鈕type="submit"更改為type="button" 。

解決方案2
 0  2018-07-25 19:55:47

您的代碼中有許多語法錯誤，導致其無法執行。

您還應該使用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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 提交表單標簽中的驗證功能 在onsubmit內部未調用JS表單驗證功能 提交表單驗證功能在IE中不起作用 表單onSubmit驗證無效 表單驗證未運行onsubmit 提交Java表單驗證 僅在onSubmit js驗證為true時才在表單操作中調用php函數 在Semantic-ui驗證表單中添加onSubmit函數 表單“提交”事件不等待驗證 function 返回 HTML Form Onsubmit驗證不適用於JS功能
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM