簡體   English   中英

如何進行同時顯示錯誤消息的JavaScript表單驗證

[英]How to make a JavaScript form validation that displays an error message simultaneously

我是一名新的JavaScript程序員,正在嘗試使用JavaScript創建表單驗證器,但是如果未填寫所有表單(即全部為空),則似乎不會顯示錯誤消息,僅顯示名稱表單錯誤。

這是我嘗試的:

function myValidate() {
    var x = document.forms["myform"]["name"].value;
    var y = document.forms["myform"]["country"].value;
    var z = document.forms["myform"]["occupation"].value;
    var a = document.forms["myform"]["status"].value;

    if (x == "null" || x == "") {
        var b = document.getElementById("nameErr");
        b.innerHTML = "Name Must Be Filled Out";
        return false;
    } else {
        var b = document.getElementById("nameErr");
        b.innerHTML = "";
        return true;
    }

    if (y == "null" || y == "") {
        var c = document.getElementById("countryErr");
        c.innerHTML = "Country Must Be Filled Out";
        return false;
    } else {
        var c = document.getElementById("countryErr");
        c.innerHTML = "";
        return true;
    }

    if (z == "null" || z == "") {
        var d = document.getElementById("occupationErr");
        d.innerHTML = "Occupation Must Be Filled Out";
        return false;
    } else {
        var d = document.getElementById("occupationErr");
        d.innerHTML = "";
        return true;
    }

    if (a == "null" || a == "") {
        var e = document.getElementById("statusErr");
        e.innerHTML = "Status Must Be Filled Out";
        return false;
    } else {
        var e = document.getElementById("statusErr");
        e.innerHTML = "";
        return true;
    }
}

這是JavaScript代碼。

<form action="process.php" method="post" onsubmit="return myValidate()" name="myform">
    Name:
    <input type="text" id="name" name="name">
    <span id="nameErr"></span><br><br>

    Country:
    <input type="text" id="country" name="country">
    <span id="countryErr"></span><br><br>

    Occupation:
    <input type="text" id="occupation" name="occupation">
    <span id="occupationErr"></span><br><br>

    Status:
    <input type="text" id="status" name="status">
    <span id="statusErr"></span><br><br>

    <input type="submit" name="submit" value="Submit">
</form>

這是HTML表單。

請幫忙,謝謝

似乎您沒有意識到調用return終止您所在的函數。如果驗證失敗,則需要return false ,但是直到驗證過程結束之前,您都不想return true

嘗試:

function myValidate() {
    var x = document.forms["myform"]["name"].value;
    var y = document.forms["myform"]["country"].value;
    var z = document.forms["myform"]["occupation"].value;
    var a = document.forms["myform"]["status"].value;
    var b = document.getElementById("nameErr");    
    var c = document.getElementById("countryErr");
    var d = document.getElementById("occupationErr");
    var e = document.getElementById("statusErr");

    if (!x || x.length==0) {
        b.innerHTML = "Name Must Be Filled Out";
        return false;
    } else {
        b.innerHTML = "";
    }

    if (!y || y.length==0) {
        c.innerHTML = "Country Must Be Filled Out";
        return false;
    } else {
        c.innerHTML = "";
    }

    if (!z || z.length==0) {
        d.innerHTML = "Occupation Must Be Filled Out";
        return false;
    } else {
        d.innerHTML = "";
    }

    if (!a || a.length==0) {
        e.innerHTML = "Status Must Be Filled Out";
        return false;
    } else {
        e.innerHTML = "";
    }
    return true;
}

這將返回遇到的第一個錯誤。 如果您想一次檢查所有內容,則需要將true / false存儲在變量中,並保留所有return叫,直到結束並return theVariableName;return theVariableName;

您可以將標志用於保存狀態:

http://jsfiddle.net/vEvT2/1/

var flag = true;

如果找到空控件,則更改為false

暫無
暫無

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

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM