【问题标题】:Form onsubmit issues?表单提交问题?
【发布时间】:2013-05-30 10:36:28
【问题描述】:

我编写了一些验证代码来验证某些表单条目,我尝试使用 onsubmit 命令调用它们,但是当我使用表单时,似乎只有该行中调用的第一个函数有效,并且一旦成功验证其余功能被忽略,表单只是提交?这是我的代码:

<script>
function validateFamily()
{
var family=document.getElementById('family');
if (family.value=="")
    {
     alert("Family name must be filled out");
     return false;
    }
else if (document.getElementById('family').value.length > 35)
    {
        alert("Family name cannot be more than 35 characters");
        return false;
    }
}

function validateGiven()
{
var given=document.getElementById('given');
if (given.value=="")
    {
     alert("Given name must be filled out");
     return false;
    }
else if (document.getElementById('given').value.length > 35)
    {
        alert("Given name cannot be more than 35 characters");
        return false;
    }
}

function validDate()
{
var chkdate = document.getElementById("dob").value
if(document.getElementById("dob").value == "")
{
    alert("Please enter Date of Birth")
    return false;
}
else if(!chkdate.match(/^(0[1-9]|[12][0-9]|3[01])[\- \/.](?:(0[1-9]|1[012])[\- \/.](200)[0-4]{1})$/))
    {
      alert('The entered date is an incorrect format');
     return false;
    }
}

function validateMaleFemale() 
{
var radios = document.getElementsByName('malefemale');

for (var i = 0; i < radios.length; i++) 
{
    if (radios[i].checked) 
{
    return true;
}
};
alert ('You must choose male or female');
return false;
}

function validateAddress()
{
var address = document.getElementById('address');
var stringa = document.getElementById('address').value;
if (address.value=="")
    {
     alert("Address must be filled out");
     return false;
    }
else if (document.getElementById('address').value.length > 150)
    {
        alert("Address cannot be more than 150 characters");
        return false;
    }
else if (/[^a-zA-Z0-9\-\/]/.test( stringa ) )
    {
        alert("Address can only contain alphanumeric, hypehns(-) and backslash's(/)")
        return false;
    }
}

function validateParent()
{
var parent = document.getElementById('parenta');
var stringb = document.getElementById('parenta').value;
if (parent.value=="")
    {
     alert("Parent/Carer name must be filled out");
     return false;
    }
else if (document.getElementById('parenta').value.length > 60)
    {
        alert("Parent/Carer name can not be more than 60 characters");
        return false;
    }
else if (/[^a-zA-Z\-\/]/.test( stringb ) )
    {
        alert("Parent/Carer can only contain alphabetic and hypehns(-)")
        return false;
    }
}

function validateWork()
{ 
var num1 = document.getElementById('workno').value;

if (num1 !== "" && !num1.match(/\(\d{2}\)\d{8}/))
{
alert('That is not correct telephone number format');
return false;
}
}

function validateHome()
{ 
var num2 = document.getElementById('homeno').value;

if (num2 !== "" && !num2.match(/\(\d{2}\)\d{8}/))
{
alert('That is not correct telephone number format');
return false;
}
}

function validateMob()
{ 
var num3 = document.getElementById('mob').value;

if(num3 == "")
{
alert('Please enter a mobile number');
return false;
}
else if (num3 !== "" && !num3.match(/\(\d{3}\)\d{8}/))
{
alert('That is not correct mobile number format');
return false;
}
}
</script>

<form name="eoiform" method="POST" action="<?php echo $_SERVER["PHP_SELF"];?>" id="eoi" onsubmit="return !!(validateFamily() && validDate() && validateAddress() && validateParent() && validateMaleFemale() && validateMob() && validateHome() && validateWork());">

例如,函数validateFamily() 将正常工作并在字段为空时提醒我,但在字段中输入内容后,其他函数将被忽略并提交表单。谁能告诉我为什么会发生这种情况或如何解决它?

【问题讨论】:

  • 您需要出示您的验证码
  • 返回后为什么需要!!
  • preventDefault 应该可以解决问题,确保您也返回 false。
  • @Blade0rz 我没有首先添加我的验证码,因为有很多人可以阅读,但我现在已经添加了。
  • @francis 不,你没有,它用于将东西转换为布尔值,但你的函数已经返回布尔值。

标签: javascript forms function onsubmit


【解决方案1】:

编辑:默认情况下(即)验证通过时,您的某些验证方法不会返回值:

例如:

    function validateFamily()
    {
       var family=document.getElementById('family');
       if (family.value=="")
       {
           alert("Family name must be filled out");
           return false;
       }
       else if (document.getElementById('family').value.length > 35)
       {
           alert("Family name cannot be more than 35 characters");
           return false;
       }
      return true;// Add this to all validate Methods!
    }

在所有 validateXxx() 方法中添加默认返回值。让我知道这是否有效。

【讨论】:

  • 这是否仍然允许单个功能警报?以便用户确切知道错误在哪里?
  • 我如上编辑了我的答案,这将在调用该方法时一一弹出个别警报。
  • 我在所有函数的末尾添加了 return true ,这成功了,非常感谢!
猜你喜欢
  • 2010-10-09
  • 2021-05-13
  • 2015-07-09
  • 2021-12-14
  • 2018-01-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多