Javascript窗體驗證 - jsFiddle錯誤

我試圖顯示一個隱藏的錯誤列表onsubmit，如果有任何輸入是空白的。我不斷收到jsFiddle中的錯誤，聲明「Shell形式不驗證。」我檢查了我的語法，它看起來好（我是新的，所以我可能會錯過一些東西）。Javascript窗體驗證 - jsFiddle錯誤

任何幫助表示讚賞！

https://jsfiddle.net/2mpg7mbj/

HTML：

CSS：

#errors { 
    display:none; 
}

的Javascript：

function validateForm() 
{ 

    var errorMsg = ''; 
    var errorDisplay = document.getElementByID('errors').style; 
    var errorList = document.getElementByID('errorList'); 

    var name = document.getElementByID('A').value; 
    var age = document.getElementByID('B').value; 
    var city = document.getElementByID('C').value; 

    if (name === '') { 
    errorMsg += '<li>Name</li>'; 
    }; 

    if (age === '') { 
    errorMsg += '<li>Age</li>'; 
    }; 

    if (city === '') { 
    errorMsg += '<li>City</li>'; 
    }; 

    if (errorMsg.length != '') { 
    errorList.innerHTML = errorMsg; 
    errorDisplay.display = 'block'; 
    return false; 
    }; 

return true; 
};

來源

2016-04-30 PPJN

您的形式更改爲

<form method="POST" action='/endpoint' onsubmit="validateForm(event)"> 
    <label for="A">Name</label> 
    ...

，然後在腳本中您需要更改document.getElementByID(...)到document.getElementById(...)（「ID」，而不是「ID」）和preventDefault（）方法在傳遞在停止默認表單提交過程的事件。

function validateForm(event) { 
    ... 
    if(errorMsg.length){ 
    ... 
    event.preventDefault(); 
    } 
    ...

https://jsfiddle.net/stevenkaspar/2mpg7mbj/2/

來源

2016-04-30 13:51:23

謝謝！選擇這個是因爲它不僅做我想做的事，還阻止了表單提交。 – PPJN

一些語法問題：

所有if塊後刪除;：

if (age === '') { 

    errorMsg += '<li>Age</li>'; 
}

errorMsg.length返回一個數字，而不是字符串。

if (errorMsg.length !== 0) { 

    errorList.innerHTML = errorMsg; 
    errorDisplay.display = 'block'; 
    return false; 
}

變化document.getElementBy ID（）來document.getElementById()

Demo with all fixed issues

來源

2016-04-30 13:51:40

謝謝！這實現了我的目標，但它允許表單重新提交。使用Steven在下面指出的方法阻止了表單提交。 – PPJN

你還沒有加入jQuery的在小提琴等都紛紛加入基本的jQuery。希望我已經按照你的意願完成了。

function validateForm() 
 
{ 
 
    var errorMsg = '' 
 
    var errorDisplay = $("#errors"); 
 
    var errorList = $("#errorList"); 
 
    errorList.find("li").remove(); 
 
\t var name = $("#A").val(); 
 
    var age = $("#B").val(); 
 
    var city = $("#C").val(); 
 
    if (!name) { 
 
    \t errorMsg += '<li>Name</li>'; 
 
    } 
 
    
 
    if (!age) { 
 
    \t errorMsg += '<li>Age</li>'; 
 
    } 
 
    
 
    if (!city) { 
 
    \t errorMsg += '<li>City</li>'; 
 
    } 
 

 
\t if (errorMsg.length > 0) { 
 
    \t errorList.append(errorMsg); 
 
    \t errorDisplay.css("display","block"); 
 
    return false; 
 
    } 
 
    else 
 
    { 
 
    \t return true; 
 
    } 
 
}

#errors { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<body> 
 

 
<div id="errors"> 
 
    <p>The following field(s) must be filled out:</p> 
 
    <ul id="errorList"> 
 
    
 
    </ul> 
 
</div> 
 

 
<form method="POST" onsubmit="return validateForm()"> 
 
    <label for="A">Name</label> 
 
    <input id="A" name="A" type="text"> 
 
    <br><br> 
 
    <label for="B">Age</label> 
 
    <input id="B" name="B" type="text"> 
 
    <br><br> 
 
    <label for="C">City</label> 
 
    <input id="C" name="C" type="text"> 
 
    <br><br> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 
</body>

來源

2016-04-30 15:04:39 Ronak

Javascript窗體驗證 - jsFiddle錯誤

回答

相關問題