Question

我将以下代码用于我用于验证的表单，并希望在字段下方显示错误：

<!DOCTYPE html>
<html>
<head>
 <style type="text/css">

.errorcss {
   background-color: yellow;
   color:red;
}
</style>

<script type="text/javascript">
error=" ";

function isBlank(s) {

  var len=s.length
  var i
  for(i=0; i<len; ++i) {
    if(s.charAt(i) != " ") return false
  }
  return true
}

function validate(fieldName, fieldValue) {

  if(isBlank(fieldValue)) {
     error = fieldName + " cannot be left blank.";
     alert(fieldName+" cannot be left blank.")
     return false
  }
  return true
}

function validatePass(passwordValue, confirmPasswordValue) {

  if (passwordValue !== confirmPasswordValue) {
     alert("Password and Confirm Password do not match")
     return false
  }
  return true
}


function validateForm() {

  if(!validate("The last name field", document.contest.last.value))
     return false
  if(!validate("The email field", document.contest.email.value))
     return false
  if(!validate("The password field", document.contest.pass.value))
     return false

  if(!validatePass(document.contest.pass.value, document.contest.repass.value))
     return false
  if(!validate("The description field", document.contest.desc.value))
     return false
}

</script>
</head>

<body>
<form name="contest" onSubmit = "return validateForm()" method="GET">
<h2 align="center">Sign Up Form</h2>
<p>
*Last Name:<input type="text" name="last" size="16">
First Name:<input type="text" name="first" size="12">
Middle Initial:<input type="text" name="initial" size="2">
</p>
<div class="errorcss">
   <script type="text/javascript">document.write(error);</script>
</div>
<p>
*E-mail Address:<input type="email" name="email">
*Password:<input type="password" size="10" name="pass">
*Confirm Password:<input type="password" size = "10" name="repass">
</p>
<p>
In 50 words or less, describe yourself:
</p>
<textarea name="desc" ROWS="5" COLS="40"></textarea>
<p>
Submit your form:<input type="SUBMIT" value="Submit my form">
</p>
</form>
</body>
</html>

我面临的问题是我希望在带有errorcss类的div中显示无姓名错误。但它没有显示它。此外，我想知道如何使用JavaScript和CSS显示所有错误。

Answer 1

我添加了15个分号，删除了错误div中的脚本，给了errordiv一个id（＆＃39; errordiv＆＃39;），并添加了：

document.getElementById('errordiv').innerText=error;

函数validateForm();中的

。

结果代码：

<!DOCTYPE html>
<html >
<head >
    <style type="text/css" >

        .errorcss {
            background-color : yellow;
            color            : red;
        }
    </style >

    <script type="text/javascript" >
        error = " ";

        function isBlank( s )
        {

            var len = s.length;
            var i;
            for ( i = 0; i < len; ++i ) {
                if ( s.charAt( i ) != " " ) return false;
            }
            return true;
        }

        function validate( fieldName, fieldValue )
        {

            if ( isBlank( fieldValue ) ) {
                error = fieldName + " cannot be left blank.";
                alert( fieldName + " cannot be left blank." );
                return false;
            }
            return true;
        }

        function validatePass( passwordValue, confirmPasswordValue )
        {

            if ( passwordValue !== confirmPasswordValue ) {
                alert( "Password and Confirm Password do not match" );
                return false;
            }
            return true;
        }

        function validateForm()
        {

            if ( !validate( "The last name field", document.contest.last.value ) ) {
                document.getElementById( 'errordiv' ).innerText = error;
                return false;
            }
            if ( !validate( "The email field", document.contest.email.value ) ) {
                return false;
            }
            if ( !validate( "The password field", document.contest.pass.value ) ) {
                return false;
            }

            if ( !validatePass( document.contest.pass.value, document.contest.repass.value ) ) {
                return false;
            }
            if ( !validate( "The description field", document.contest.desc.value ) ) {
                return false;
            }
        }

    </script >
</head >

<body >
    <form name="contest" onSubmit="return validateForm()" method="GET" >
        <h2 align="center" >Sign Up Form</h2 >

        <p >
            *Last Name:<input type="text" name="last" size="16" > First Name:<input type="text" name="first" size="12" > Middle Initial:<input type="text" name="initial" size="2" >
        </p >

        <div class="errorcss" id="errordiv" >

        </div >
        <p >
            *E-mail Address:<input type="email" name="email" > *Password:<input type="password" size="10" name="pass" > *Confirm Password:<input type="password" size="10" name="repass" >
        </p >

        <p >
            In 50 words or less, describe yourself:
        </p >
        <textarea name="desc" ROWS="5" COLS="40" ></textarea >

        <p >
            Submit your form:<input type="SUBMIT" value="Submit my form" >
        </p >
    </form >
</body >

Answer 2

有很多问题，一个是：

  <div class="errorcss">
    <script type="text/javascript">
      document.write(error);//code fails on page load
    </script>
  </div>

看看这里：

＆＃13;

function isBlank(s) {
  return 0 === s.replace(/\s/g, '').length;
}

function validate(fieldName, fieldValue) {
  if (isBlank(fieldValue)) {
    alert(fieldName + " cannot be left blank.")
    return false
  }
  return true
}

function validatePass(passwordValue, confirmPasswordValue) {

  if (passwordValue !== confirmPasswordValue) {
    alert("Password and Confirm Password do not match")
    return false
  }
  return true
}


function validateForm() {
  if (!validate("The last name field", document.contest.last.value))
    return false
  if (!validate("The email field", document.contest.email.value))
    return false
  if (!validate("The password field", document.contest.pass.value))
    return false

  if (!validatePass(document.contest.pass.value, document.contest.repass.value))
    return false
  if (!validate("The description field", document.contest.desc.value))
    return false
}

＆＃13;

<form name="contest" onSubmit="return validateForm()" method="GET">
  <h2 align="center">Sign Up Form</h2>
  *Last Name:
  <input type="text" name="last" size="16">
  <br/>First Name:
  <input type="text" name="first" size="12">
  <br/>Middle Initial:
  <input type="text" name="initial" size="2">
  <br/>*E-mail Address:
  <input type="email" name="email">
  <br/>*Password:
  <input type="password" size="10" name="pass">
  <br/>*Confirm Password:
  <input type="password" size="10" name="repass">
  <br/>In 50 words or less, describe yourself:
  <textarea name="desc" ROWS="5" COLS="40"></textarea>
  <br/>Submit your form:
  <input type="SUBMIT" value="Submit my form">
</form>

＆＃13;

JavaScript表单验证错误无法打印

2 个答案: