一次一个警报

时间:2013-04-12 06:10:58

标签: javascript function popup alert

我正在创建一个表单,并在表单中有一堆函数来验证某些字段,但我遇到的问题是,当你提交每个返回false的验证时,会弹出一个警告,所以它最终成为很多警报。

有没有办法更改对函数或函数本身的调用,以便一次只弹出一个警报?

我的表单目前有效,如果您提交表单并将名字和姓氏字段留空并且两个字段都是必填字段,则会弹出两个警告,说明您没有填写名字而您最后没有填写名字(可能会因我拥有的字段数量而烦恼)。

我正试图找出一种方法,这样如果你提交表格并且两个字段都空了,只会弹出一个警告说你没有填写名字然后填写第一个名字之后字段并且仍然将姓氏字段留空,然后会弹出警告,说明您没有填写姓氏。

这是我拥有的主要验证功能块:

function validateText() 
{
var firstname=document.getElementById('txtfirstname');
var familyname=document.getElementById('txtfamilyname');
var streetaddress=document.getElementById('txtaddress');
var suburb=document.getElementById('txtsuburb');
var postcode=document.getElementById('txtpostcode');
var country=document.getElementById('txtcountry');
var telephone=document.getElementById('txttelephone');
var email=document.getElementById('txtemail');
var regodate=document.getElementById('txtregodate');
var regocost=document.getElementById('txtregocost');

if (firstname.value=="")
{
     alert("First name must be filled out");
     return false;
}
if (familyname.value=="")
{
     alert("Family name must be filled out");
     return false;
}

var institutioncompany=document.getElementById('txtinstcomp').value;
if (institutioncompany == "") 
{
     alert("Institution/company must be filled out");
     return false;
}
var category=document.getElementById('category').value;
if (category == "UWS Student" || category == "Other UWS Staff" || category == "UWS Academic")
{
    if (document.getElementById("txtnumber").value == "")
    {
        alert('Student number/Staff number is mandatory');
        return;
    }
}

if (streetaddress.value=="")
{
     alert("Street address must be filled out");
     return false;
}
 if (suburb.value=="")
{
     alert("Suburb must be filled out");
     return false;
}
 if (postcode.value=="")
{
     alert("Postcode must be filled out");
     return false;
}
 if (country.value=="")
{
     alert("Country must be filled out");
     return false;
}
 if (telephone.value=="")
{
     alert("Telephone number must be filled out");
     return false;
}
 if (email.value=="")
{
     alert("Email address must be filled out");
     return false;
}
 if (regodate.value=="")
{
     alert("Date of registration must be filled out");
     return false;
}
 if (regocost.value=="")
{
     alert("Cost of registration must be filled out");
     return false;
}
}


function validateCheckBoxes(theForm) 
{
if (
theForm.checkbox.checked == false &&
theForm.checkbox1.checked == false &&
theForm.checkbox2.checked == false)
{
    alert ('You didn\'t choose any of the checkboxes');
    return false;
} else {    
    return true;
}
}

function validateRadioButton() 
{
var radios = document.getElementsByName('yesno');

for (var i = 0; i < radios.length; i++) 
{
    if (radios[i].checked) 
{
    return true; //checked
}
};
// not checked, show error
alert ('You didn\'t choose whether you wanted a copy of work proceedings');
return false;
}


function validateEmail() 
{
var emailID = document.rego.email.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || (dotpos - atpos < 2 ))
{
    alert("Please enter correct email ID");
    return false;
}
return(true);
}

以下是我调用某些功能的方法:

<form name="rego" action="submit.htm" onsubmit="return !!(validateText() & validateCheckBoxes(this) & validateRadioButton() & validateEmail() & populateInstitution());" method="POST">

2 个答案:

答案 0 :(得分:1)

&安培;在javaScript和&amp;&amp ;;中表示按位AND是合乎逻辑的,所以

   !!(validateText() 
    & validateCheckBoxes(this) 
    & validateRadioButton() 
    & validateEmail() 
    & populateInstitution())

将导致评估每个函数和按位以及所有结果的操作。

当你这样做时:

   !!(validateText() 
    && validateCheckBoxes(this) 
    && validateRadioButton() 
    && validateEmail() 
    && populateInstitution())

返回false的第一个函数将结束评估,因为False AND(逻辑)其他任何内容将最终为false ...这是javaScript的内部优化,因此返回false的第一个函数将不会在换句话说......

答案 1 :(得分:0)

所以在我发表评论之前我被打断了。

如果我不想要jQuery验证,我会考虑以下内容。

关键问题是努力保持一致。你需要在任何地方返回true和false

形式:

<form onsubmit="return validate(this)"...>

JavaScript的:

function validate(theForm)  {
  return validateText() &&
         validateCategory(document.getElementById("txtcategory")) &&
         validateCheckBoxes(theForm) &&
         validateEmail(theForm);

}

function validateCategory(category) {
  var val = category.value;
  if (document.getElementById("txtnumber").value == "" && (val == "UWS Student" || val == "Other UWS Staff" || val == "UWS Academic")) {
    alert('Student number/Staff number is mandatory');
    document.getElementById("txtnumber").focus();
    return false;
  }
  return true;
}

var mandatory = {
 firstname: "First name must be filled out",
 familyname: "Family name must be filled out",
 instcomp : "Institution/company must be filled out",
 streetaddress: "Street address must be filled out",
 suburb: "Suburb must be filled out",
 postcode: "Postcode must be filled out",
 country:"Country must be filled out",
 telephone: "Telephone number must be filled out",
 email:"Email address must be filled out",
 regodate:"Date of registration must be filled out",
 regocost:"Cost of registration must be filled out"
}; // note no comma after the last

function validateText() {
  for (var o in mandatory) {
    var fld = document.getElementById("txt"+o);
    if (fld.value==="") {
      alert(mandatory[o]);
      fld.focus();
      return false;
    }
  }
  return true;
}
function validateCheckBoxes(theForm) {
  if (theForm.checkbox.checked && theForm.checkbox1.checked && theForm.checkbox2.checked) return true;
  alert ('You didn\'t choose any of the checkboxes');
  return false;
}

function validateRadioButton() {
var radios = document.getElementsByName('yesno');
for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    return true; //checked
  }
}
// not checked, show error
  alert ('You didn\'t choose whether you wanted a copy of work proceedings');
  return false;
}
function validateEmail(theForm)  {
  var email = theForm.email;
  var emailID = email.value;
  atpos = emailID.indexOf("@");
  dotpos = emailID.lastIndexOf(".");
  if (atpos < 1 || (dotpos - atpos < 2 )) {
    alert("Please enter correct email ID");
    email.focus();
    return false;
  }
  return true;
}