即使表单无效，我的表单也会提交数据。但我的验证工作正常 [英] My form submits data even if it is invalid. But my validation works fine
问题描述
我的代码如下：
<！doctype html>
< html lang =en>
< head>
< title>测试textarea< / title>
< style type =text / css>< / style>
< script type =text / javascriptsrc =validation.js>< / script>
< / head>
< body>
< div id =wrapper>
< span id =error_boxstyle =display：none;>< / span>
< form name =storyTellermethod =getaction =＃onSubmit =return validateForm（）>
< p class =title>
< label for =title> TITLE：< / label>
< input type =textid =titlename =titlerequired onBlur =validateTitle（title）/>
< / p>
< textarea name =entryid =entryrows =10cols =45onBlur =validateEntry（entry）>
< / textarea>
< input type =submitvalue =submit/>
< / form>
< / div>
< / body>
< / html>
validation.js的内容：
<$ p （$ title ='title'）。value））{
document.getElementById（）; $ p> function validateTitle（title）{/ * validates the title * /
if（isNaN（document.getElementById （ '标题'）style.background = ＃ccffcc;
document.getElementById（'error_box'）。style.display =none;
返回true;
}
else {
document.getElementById（'error_box'）。innerHTML ='请输入一个有效的标题';
document.getElementById（'error_box'）。style.display =block;
document.getElementById（'title'）。style.background =red;
返回false;
function validateEntry（entry）{/ * validating the entry * /
var x = document.getElementById（'entry'）。value;
x = x.trim（）; $（b）if（（x ==）||（x == null））{
document.getElementById（'entry'）。style.background =red;
document.getElementById（'error_box'）。innerHTML ='你的故事在哪里';
document.getElementById（'error_box'）。style.display =block;
返回false;
}
else {
document.getElementById（'entry'）。style.background =＃ccffcc;
document.getElementById（'error_box'）。innerHTML ='';
document.getELementById（'error_box'）。style.display =none;
返回true;
函数validateForm（）{/ *验证表单* /
var error = 0;
if（！validateTitle（'title'））{
document.getElementById（'error_box'）。style.display =block;
错误++;
}
if（！validateEntry（'entry'））{
document.getElementById（'error_box'）。style.display =block;
错误++;
}
if（error> 0）{
return false;
$ / code $ / pre
修改您的代码现在可以更好地用于提交和模糊事件。
在您的HTML源代码中，将 onblur 属性更改为 onblur =validateEntry（this）然后你可以使用这个javascript：
function validateEntry（entry）{/ * validating * /
var error_box = document.getElementById（'error_box'）;
error_box.style.display =none;
if（entry.name ==title）{// INPUT type =text
if（！isNaN（entry.value））{
error_box.innerHTML ='请输入一个有效的标题';
error_box.style.display =block;
entry.style.background =#fee;
返回false;
} else {
entry.style.background =#ccffcc;
返回true;
}
} else if（entry.name ==entry）{// TEXTAREA
var x = entry.value.trim（）;
if（（x ==）||（x == null））{
error_box.innerHTML ='您的故事在哪里？';
error_box.style.display =block;
entry.style.background =#fee;
返回false;
} else {
entry.style.background =#ccffcc;
返回true;
$ b函数validateForm（）{/ *验证表单* /
var form = document.forms ['storyTeller'] ;
var error_box = document.getElementById（'error_box'）;
var error = 0;
var error_msg ='';
if（！validateEntry（form ['title']））{
error ++;
error_msg + = error_box.innerHTML +'< br />';
}
if（！validateEntry（form ['entry']））{
error ++;
error_msg + = error_box.innerHTML;
}
if（error> 0）{
error_box.innerHTML = error_msg;
error_box.style.display =block;
返回false;
} else {
error_box.style.display =none;
返回true;
}
}
My code follows:.
<!doctype html>
<html lang="en">
<head>
<title>Testing the textarea</title>
<style type="text/css"></style>
<script type="text/javascript" src="validation.js"></script>
</head>
<body>
<div id="wrapper">
<span id="error_box" style="display:none;"></span>
<form name="storyTeller" method="get" action="#" onSubmit="return validateForm()">
<p class="title">
<label for="title">TITLE:</label>
<input type="text" id="title" name="title" required onBlur="validateTitle(title)"/>
</p>
<textarea name="entry" id="entry" rows="10" cols="45" onBlur="validateEntry(entry)">
</textarea>
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>
Content of validation.js:
function validateTitle(title){/*validating the title*/
if (isNaN(document.getElementById('title').value)){
document.getElementById('title').style.background="#ccffcc";
document.getElementById('error_box').style.display="none";
return true;
}
else{
document.getElementById('error_box').innerHTML='Please enter a valid title';
document.getElementById('error_box').style.display="block";
document.getElementById('title').style.background="red";
return false;
}
}
function validateEntry(entry){/*validating the entry*/
var x=document.getElementById('entry').value;
x = x.trim();
if((x=="")||(x==null)){
document.getElementById('entry').style.background="red";
document.getElementById('error_box').innerHTML = 'Where is your story';
document.getElementById('error_box').style.display="block";
return false;
}
else{
document.getElementById('entry').style.background="#ccffcc";
document.getElementById('error_box').innerHTML='';
document.getELementById('error_box').style.display="none";
return true;
}
}
function validateForm(){/*validating the form*/
var error = 0;
if(!validateTitle('title')){
document.getElementById('error_box').style.display="block";
error++;
}
if(!validateEntry('entry')){
document.getElementById('error_box').style.display="block";
error++;
}
if(error > 0){
return false;
}
}
Modified your code so now it works better for both submit and blur events.
In your HTML source change both onblur attributes to onblur="validateEntry(this)" and then you can use this javascript:
function validateEntry(entry) { /*validating*/
var error_box = document.getElementById('error_box');
error_box.style.display = "none";
if (entry.name == "title") { // INPUT type="text"
if (!isNaN(entry.value)) {
error_box.innerHTML = 'Please enter a valid title';
error_box.style.display = "block";
entry.style.background = "#fee";
return false;
} else {
entry.style.background = "#ccffcc";
return true;
}
} else if (entry.name == "entry") { // TEXTAREA
var x = entry.value.trim();
if ((x == "") || (x == null)) {
error_box.innerHTML = 'Where is your story?';
error_box.style.display = "block";
entry.style.background = "#fee";
return false;
} else {
entry.style.background = "#ccffcc";
return true;
}
}
}
function validateForm() { /*validating the form*/
var form = document.forms['storyTeller'];
var error_box = document.getElementById('error_box');
var error = 0;
var error_msg = '';
if (!validateEntry(form['title'])) {
error++;
error_msg += error_box.innerHTML + '<br/>';
}
if (!validateEntry(form['entry'])) {
error++;
error_msg += error_box.innerHTML;
}
if (error > 0) {
error_box.innerHTML = error_msg;
error_box.style.display = "block";
return false;
} else {
error_box.style.display = "none";
return true;
}
}
这篇关于即使表单无效，我的表单也会提交数据。但我的验证工作正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
