在提交期間停止表單如果驗證不正確

我想使用JavaScript來驗證表單，但如果表單不驗證，我不希望表單發送到「操作」頁面。在提交期間停止表單如果驗證不正確

的驗證：

<script> 
    function formSubmit() 
    { 
    document.getElementById("signup_form").submit(); 
    var x=document.forms["signup_form"]["tname"].value; 
    if (x==null || x=="") 
     { 
     alert("First name must be filled out"); 
     return false; 
     } 
    } 
</script>

形式本身：

<form action="some_file.php" method="post" id="signup_form" name="signup_form" onsubmit="return formSubmit()">

但所有這確實是，如果TNAME字段爲空，它會返回一個警告，但只要用戶點擊OK，該表單然後重定向到some_file.php。我在這裏錯過了什麼？

提交按鈕：

<a href="" onclick="return formSubmit(); return false" class="purplebutton">Signup</a>

那麼你有什麼我錯過了什麼？我將來如何避免這種情況？

來源

2012-12-02 user115422

沒有必要formSubmit嘗試提交表單！只需執行驗證檢查，如果您希望提交進行，則返回「true」，否則返回「false」。另外，您不需要檢查x == null –

另一方面，您可能還需要檢查用戶是否已經按了幾次空間然後提交。除此之外，我認爲你需要在發送之前修改輸入。我已經更新了我的解決方案，以涵蓋您只希望檢查空間並希望將修剪後的輸入發送回服務器的可能性。 –

試試這個：

function formSubmit() 
{ 
    var x=document.forms["signup_form"]["tname"].value; 
    if (x=="") 
    { 
     alert("First name must be filled out"); 
     return false; 
    } 
    return true; 
}

* 對代碼進行更改：* - 沒有必要formSubmit嘗試提交表單！只要執行驗證檢查並返回true如果您想提交繼續或false否則。

此外，您不需要檢查x == null的情況。如果文本框是空的，它的值將是「」。
雖然可能需要檢查x不只包含空格。如果你不關心支持舊瀏覽器，你可以使用新的Javascript修剪功能。如果你關心的向後兼容性，無論是嘗試提供trim許多JavaScript庫的一個或以下幾點：

function formSubmit() 
{ 
    var x=document.forms["signup_form"]["tname"].value.replace(/^\s+|\s+$/g, ''); 
    if (x=="") 
    { 
     alert("First name must be filled out"); 
     return false; 
    } 
    return true; 
}

如果我只是想避免提交的空間，我會離開var x=位，因爲它是，並在檢查中添加替換，使其if(x.replace(/\s/g, '') == "")。但是，我也想調整輸入，以便如果用戶輸入「user1」或「user1」，表單將發送「user1」。

你可以看到三種不同版本的版本在這裏工作： http://jsfiddle.net/9LPfb/2/ http://jsfiddle.net/9LPfb/3/ http://jsfiddle.net/9LPfb/6/

來源

2012-12-02 05:04:17

標記爲答案，因爲這樣做的一切，我需要多 – user115422

您錯誤地執行了statememts。您在驗證之前提交表單。在if語句下面移動此語句

document.getElementById("signup_form").submit();

更進一步。您在兩個地方撥打formSubmit()，form標籤和a標籤一次就可以。

更新的代碼：

<html> 
<head> 
    <title></title> 
    <script> 
    function formSubmit() 
    { 

    var x=document.forms["signup_form"]["tname"].value; 
    if (x==null || x=="") 
     { 
     alert("First name must be filled out"); 
     return false; 
     } 
     document.getElementById("signup_form").submit(); 
    } 
</script> 
</head> 
<body> 
    <form action="some_file.php" method="post" id="signup_form" name="signup_form" onsubmit="return formSubmit()"> 
     <input type="text" name="tname" /> 
     <a href="" onclick="return formSubmit(); return false" class="purplebutton">Signup</a> 
</body> 
</html>

DEMO

來源

2012-12-02 04:57:52 defau1t

IM現在使用：'' – user115422

我已更新我的代碼，也會添加演示 – defau1t

謝謝！我很欣賞它，但是我該如何回答？ – user115422

在功能

只是刪除此行

和if條件

之後將其添加或重寫喜歡的功能一個低於

function formSubmit() 
    { 
    var x=document.forms["signup_form"]["tname"].value; 
    if (x==null || x=="") 
     { 
     alert("First name must be filled out"); 
     return false; 
     }else 
     return true; 
    }

來源

2012-12-02 04:57:58

我增加它的後如果：''仍然沒有工作... – user115422

檢查再次答案 –

您的程序流程有問題。
在提交表單前進行驗證。
提交後沒有驗證的用處，我想你錯了。只需在驗證後提交。

來源

2012-12-02 05:00:01

嘗試：

function formSubmit() { 

    var x=document.forms["signup_form"]["tname"].value; 
    if (x==null || x=="") 
     { 
     alert("First name must be filled out"); 
     return false; 
    } 
    else { 
     return true; 
    } 
}

來源

2012-12-02 05:00:50

歡迎您... :) –

你已經把所有的代碼。這是因爲執行錯誤。

<script> 
    function formSubmit() 
    { 
     var x=document.forms["signup_form"]["tname"].value; 
     if (!x){ 
       alert("First name must be filled out"); 
       return false; 
     } 
     return true; 
    } 
</script> 


<form action="some_file.php" method="post" id="signup_form" name="signup_form"> 
<a href="" onclick="return formSubmit();" class="purplebutton">Signup</a>

來源

2012-12-02 05:03:07

-1

聯繫表

function empty() { 
    var x,y; 

     x = document.forms["ff"]"name"].value; 
     y = document.forms["ff"]["surname"].value; 

     if(x=="" ||x==null){ 
     alert("Enter your name"); 
     return false; 
     }else if(y==""){ 
     alert("Enter your surname"); 
     return false; 
     }else{ 
     alert('Data is sending'); 
     return true; 
     } 
    };

在html：

<form method="POST" action="formdata.php" name="ff"onsubmit="return empty()"> 
    <table> 
     <tr> 
      <td>Enter Your Name : <input type="text" name="name" maxlength="30" size="40" id="na" ></td> 
     </tr> 
     <tr> 
     <td>Enter Your Surname : <input type="text" name="surname" maxlength="30" size="40" id="sna"></td> 
    </tr> 
    <tr> 
     <td> 
     <input type="submit" name="formsubmit" value="submit" > 
     </td> 
    </tr> 
    </table> 
</form>

來源

2015-06-09 11:53:52

我縮進你的代碼，下一次嘗試正確設置你的答案格式，以便你（可能）避免downvotes – Nobita

在提交期間停止表單如果驗證不正確

回答

相關問題