使用JavaScript验证多部分表格

Question

我遇到了挑战，是Php和Javascript方面的新手。现在我有了一个Long形式，我将其分为三个部分，分别是步骤1,2和3。我想验证“下一个按钮”的onclick表单的每个步骤，但无法正确完成。字段是在我的JavaScript中定义的，但是我没有收到设置的警报，单击后基本上没有任何反应。我得到的任何指导甚至解决方案。我真的很感激。预先感谢。

请参阅我的代码：

<script type="text/javascript">

      function validateEmail(email)
      {
      var valid = false;
      var testEmail=email;
      var atpos=testEmail.indexOf("@");
      var dotpos=testEmail.lastIndexOf(".");

      //if (atpos<1 || dotpos<atpos+2 || dotpos+2>=testEmail.length)
        if (testEmail == null || testEmail.length<=0)
      {
          document.getElementById('emailError').innerHTML = "Invalid Email";
          document.getElementById('emailError').style.color = 'red';
          valid = false;
      }
      else
      {
          document.getElementById('emailError').innerHTML = "✔";
          document.getElementById('emailError').style.color = 'green';
          valid = true;
      }
      return valid;
      }
//####################################################################
function validateSelf(self)
{
var valid = false;
var testEmail=self;
var atpos=testEmail.indexOf("@");
var dotpos=testEmail.lastIndexOf(".");

//if (atpos<1 || dotpos<atpos+2 || dotpos+2>=testEmail.length)
  if (testEmail == null || testEmail.length<=0)
{
    document.getElementById('selfError').innerHTML = "Self Rating Required.";
    document.getElementById('selfError').style.color = 'red';
    valid = false;
}
else
{
    document.getElementById('selfError').innerHTML = "✔";
    document.getElementById('selfError').style.color = 'green';
    valid = true;
}
return valid;
}


//#########################################

function validateAcaa(acaa)
{
var valid = false;
var testPhone = acaa;
var phoneFormat = /^\(?([0-9]{3})\)?[- ]?([0-9]{3})[- ]?([0-9]{4})$/;

if (testPhone == null || testPhone.length<=0)
{
        document.getElementById('acaaError').innerHTML = "Actual Archivements Must not be blank.";
        document.getElementById('acaaError').style.color = 'red';
        valid = false;
}
else
{
    if (testPhone.length>=200000)
    {
        document.getElementById('acaaError').innerHTML = "Too many Actual Archivement.";
        document.getElementById('acaaError').style.color = 'red';
        valid = false;
    }
    else
    {
        document.getElementById('acaaError').innerHTML = "✔";
        document.getElementById('acaaError').style.color = 'green';
        valid = true;
    }
}
return valid;
}

//################################################

function validateR1(r1)
{
var valid = false;
var testEmail=r1;
var atpos=testEmail.indexOf("@");
var dotpos=testEmail.lastIndexOf(".");

//if (atpos<1 || dotpos<atpos+2 || dotpos+2>=testEmail.length)
  if (testEmail == null || testEmail.length<=0)
{
    document.getElementById('r1Error').innerHTML = "VALUES Rating Required.";
    document.getElementById('r1Error').style.color = 'red';
    valid = false;
}
else
{
    document.getElementById('r1Error').innerHTML = "✔";
    document.getElementById('r1Error').style.color = 'green';
    valid = true;
}
return valid;
}

//#########################################################

    function validateC1(c1)
    {
    var valid = false;
    var testEmail=c1;
    var atpos=testEmail.indexOf("@");
    var dotpos=testEmail.lastIndexOf(".");

    if (testEmail == null || testEmail.length<=0)
    {
        document.getElementById('c1Error').innerHTML = "Please Fill the Comment Section is required!";
        document.getElementById('c1Error').style.color = 'red';
        valid = false;
    }
    else
    {
        document.getElementById('c1Error').innerHTML = "✔";
        document.getElementById('c1Error').style.color = 'green';
        valid = true;
    }
    return valid;
    }

//#######################################################################

    function validateTraining_attended(training_attended)
    {
    var valid = false;
    var testEmail=training_attended;
    var atpos=testEmail.indexOf("@");
    var dotpos=testEmail.lastIndexOf(".");

    if (testEmail == null || testEmail.length<=0)
    {
        document.getElementById('training_attendedError').innerHTML = "Please Fill the Training_attended is required!";
        document.getElementById('training_attendedError').style.color = 'red';
        valid = false;
    }
    else
    {
        document.getElementById('training_attendedError').innerHTML = "✔";
        document.getElementById('training_attendedError').style.color = 'green';
        valid = true;
    }
    return valid;
    }
//#################################################################

    function validateTraining_impact(training_impact)
    {
    var valid = false;
    var testPhone = training_impact;
    var phoneFormat = /^\(?([0-9]{3})\)?[- ]?([0-9]{3})[- ]?([0-9]{4})$/;

    if (testPhone == null || testPhone.length<=0)
    {
            document.getElementById('training_impactError').innerHTML = "Traning Impact Required.";
            document.getElementById('training_impactError').style.color = 'red';
            valid = false;
    }
    else
    {
        if (testPhone.length>=200000)
        {
            document.getElementById('training_impactError').innerHTML = "✔";
            document.getElementById('training_impactError').style.color = 'red';
            valid = false;
        }
        else
        {
            document.getElementById('training_impactError').innerHTML = "✔";
            document.getElementById('training_impactError').style.color = 'green';
            valid = true;
        }
    }
    return valid;
    }
//#####################################################################

    function validateCompetence_area(competence_area)
    {
    var valid = false;
    var testEmail=competence_area;
    var atpos=testEmail.indexOf("@");
    var dotpos=testEmail.lastIndexOf(".");

    if (testEmail == null || testEmail.length<=0)
    {
        document.getElementById('competence_areaError').innerHTML = "Please Fill the Training_attended is required!";
        document.getElementById('competence_areaError').style.color = 'red';
        valid = false;
    }
    else
    {
        document.getElementById('competence_areaError').innerHTML = "✔";
        document.getElementById('competence_areaError').style.color = 'green';
        valid = true;
    }
    return valid;
    }
//###############################################################################
    function validateCurrent_situation(current_situation)
    {
    var valid = false;
    var testEmail=current_situation;
    var atpos=testEmail.indexOf("@");
    var dotpos=testEmail.lastIndexOf(".");

    if (testEmail == null || testEmail.length<=0)
    {
        document.getElementById('current_situationError').innerHTML = "Current Situation Is a Required Field!";
        document.getElementById('current_situationError').style.color = 'red';
        valid = false;
    }
    else
    {
        document.getElementById('current_situationError').innerHTML = "✔";
        document.getElementById('current_situationError').style.color = 'green';
        valid = true;
    }
    return valid;
    }
//########################################################################

function validateExpected_outcome(expected_outcome)
{
var valid = false;
var testEmail=expected_outcome;
var atpos=testEmail.indexOf("@");
var dotpos=testEmail.lastIndexOf(".");

if (testEmail == null || testEmail.length<=0)
{
    document.getElementById('expected_outcomeError').innerHTML = "expected_outcome Invalid ";
    document.getElementById('expected_outcomeError').style.color = 'red';
    valid = false;
}
else
{
    document.getElementById('expected_outcomeError').innerHTML = "✔";
    document.getElementById('expected_outcomeError').style.color = 'green';
    valid = true;
}
return valid;
}

//##############################################################################

function validateTraining_70(training_70)
{
var valid = false;
var testEmail=training_70;
var atpos=testEmail.indexOf("@");
var dotpos=testEmail.lastIndexOf(".");

if (testEmail == null || testEmail.length<=0)
{
    document.getElementById('training_70Error').innerHTML = "training_70 required field ";
    document.getElementById('training_70Error').style.color = 'red';
    valid = false;
}
else
{
    document.getElementById('training_70Error').innerHTML = "✔";
    document.getElementById('training_70Error').style.color = 'green';
    valid = true;
}
return valid;
}

//##########################################################################
function validateTraining_20(training_20)
{
var valid = false;
var testEmail=training_20;
var atpos=testEmail.indexOf("@");
var dotpos=testEmail.lastIndexOf(".");

if (testEmail == null || testEmail.length<=0)
{
    document.getElementById('training_20Error').innerHTML = "training_20 Invalid ";
    document.getElementById('training_20Error').style.color = 'red';
    valid = false;
}
else
{
    document.getElementById('training_20Error').innerHTML = "✔";
    document.getElementById('training_20Error').style.color = 'green';
    valid = true;
}
return valid;
}

//##########################################################################

function validateTraining_10(training_10)
{
var valid = false;
var testPhone = training_10;
var phoneFormat = /^\(?([0-9]{3})\)?[- ]?([0-9]{3})[- ]?([0-9]{4})$/;

if (testPhone == null || testPhone.length<=0)
{
        document.getElementById('training_10Error').innerHTML = "training_10. Must not be blank.";
        document.getElementById('training_10Error').style.color = 'red';
        valid = false;
}
else
{
    if (testPhone.length>=200000)
    {
        document.getElementById('training_10Error').innerHTML = "Invalid training_10.";
        document.getElementById('training_10Error').style.color = 'red';
        valid = false;
    }
    else
    {
        document.getElementById('training_10Error').innerHTML = "✔";
        document.getElementById('training_10Error').style.color = 'green';
        valid = true;
    }
}
return valid;
}
//######################################################################################

function validateAspirations(aspirations)
{
var valid = false;
var testEmail=aspirations;
var atpos=testEmail.indexOf("@");
var dotpos=testEmail.lastIndexOf(".");

if (testEmail == null || testEmail.length<=0)
{
    document.getElementById('aspirationsError').innerHTML = "aspirations Required ";
    document.getElementById('aspirationsError').style.color = 'red';
    valid = false;
}
else
{
    document.getElementById('aspirationsError').innerHTML = "✔";
    document.getElementById('aspirationsError').style.color = 'green';
    valid = true;
}
return valid;
}
//######################################################################

function validateComments(comments)
{
var valid = false;
var testEmail=comments;
var atpos=testEmail.indexOf("@");
var dotpos=testEmail.lastIndexOf(".");

if (testEmail == null || testEmail.length<=0)
{
    document.getElementById('commentsError').innerHTML = "comments Required ";
    document.getElementById('commentsError').style.color = 'red';
    valid = false;
}
else
{
    document.getElementById('commentsError').innerHTML = "✔";
    document.getElementById('commentsError').style.color = 'green';
    valid = true;
}
return valid;
}

//#####VALIDATION FUNCTION###############################


//function validation()
function validateForm()
{
var validData = false;


if (validateEmail(document.getElementById('email').value) == false)
{
    validData = false;
    alert("Email is required");
}

else if(validateSelf(document.getElementById('self').value) == false)
{
    validData = false;
    alert("You Must Rate yourself Before Submitting.");
}
else if(validateAcaa(document.getElementById('acaa').value) == false)
{
    validData = false;
    alert("You Must Fill In your Actual Archievements First!");
}
else if(validateR1(document.getElementById('r1').value) == false)
{
    validData = false;
    alert("R1 must not be Blank");
}

else if (validateC1(document.getElementById('c1').value) == false)
{
    validData = false;
    alert("Comment Section Can't be Blank");
}
else if(validateTraining_attended(document.getElementById('training_attended').value) == false)
{
    validData = false;
    alert("Training Fields Are Required");
}
else if(validateTraining_impact(document.getElementById('training_impact').value) == false)
{
    validData = false;
    alert("Ttraining_impact is  Required");
}
else if(validateCompetence_area(document.getElementById('competence_area').value) == false)
{
    validData = false;
    alert("Development Focus Section is Either Not Filled Or incomplete");
}
else if(validateCurrent_situation(document.getElementById('current_situation').value) ==false)
{
    validData = false;
    alert("current_situation Must Not be Left Blank");
}

else if (validateExpected_outcome(document.getElementById('expected_outcome').value) == false)
{
    validData = false;
    alert("expected_outcome Required");
}
else if(validateTraining_70(document.getElementById('training_70',1).value) == false)
{
    validData = false;
    alert("training_70 is Blank!");
}
else if(validateTraining_20(document.getElementById('training_20',2).value) == false)
{
    validData = false;
    alert("training_20 cant Be Blank");
}
else if(validateTraining_10(document.getElementById('training_10').value) == false)
{
    validData = false;
    alert("training_10 is Blank");
}
else if(validateAspirations(document.getElementById('aspirations').value) == false)
{
    validData = false;
    alert("aspirations Must not be Blank");
}
else if(validateComments(document.getElementById('comments').value) ==false)
{
    validData = false;
    alert("comments Cant Be Blank");
}

else
{
    validData = true;
}

//alert(validData);
//alert(document.getElementById("validData").value);
return false;
//return validData;


}
</script>

<!--My FINAL SCRIPT TO VALIDATE EPMS-->
<html>
<head>

</head>
<body>
<form id="registrationForm" action="upload_file.php?upload='docu'" method="post" enctype="multipart/form-data" >
        <table >

          <tr>
              <td>Email: </td>
              <td><input type="text" id="email" name="userInput"  onBlur="validateEmail(this.value)" onKeyUp="validateEmail(this.value)" maxlength="80" size="25"><span id="emailError" class="error">  <?php echo  $emailErr;?></span></td>

          </tr>

            <tr>
                <td>SELF RATING: </td>
                <td><input type="text" name="userInput" id="self"  onKeyUp="validateSelf(this.value)"  onBlur="validateSelf(this.value)"><span id="selfError" class="error">  <?php echo  $selfErr;?></span></td>
            </tr>
            <tr>
                <td>ACAA: </td>
                <td><input type="text" name="userInput" id="acaa"  maxlength="15" size="10" onBlur="validateAcaa(this.value)" onKeyUp="validateAcaa(this.value)"><span id="acaaError" class="error">  <?php echo  $acaaErr;?></span></td>
            </tr>
            <tr>
                <td>R1: </td>
                <td><input  type="text" id="r1" name="userInput" maxlength="20" onBlur="validateR1(this.value)" onKeyUp="validateR1(this.value)"><span id="r1Error" class="error">  <?php echo  $r1Err;?></span></td>
            </tr>

            <tr>
                <td>C1: </td>
                <td><input type="text" id="c1" name="userInput"  onBlur="validateC1(this.value)" onKeyUp="validateC1(this.value)" maxlength="80" size="25"><span id="c1Error" class="error">  <?php echo  $c1Err;?></span></td>

            </tr>
            <tr>
                <td>Training Attended: </td>
                <td><input type="text" id="training_attended" name="userInput"   onKeyUp="validateTraining_attended(this.value,1)"  onBlur="validateTraining_attended(this.value,1)"><span id="training_attendedError" class="error">  <?php echo  $training_attendedErr;?></span></td>
            </tr>
            <tr>
                <td>Training Impact: </td>
                <td><input type="text" name="userInput" id="training_impact"  maxlength="15" size="10" onBlur="validateTraining_impact(this.value)" onKeyUp="validateTraining_impact(this.value)"><span id="training_impactError" class="error">  <?php echo  $training_impactErr;?></span></td>
            </tr>
            <tr>
                <td>competence_area: </td>
                <td><input  type="text" id="competence_area" name="userInput" maxlength="20" onBlur="validateCompetence_area(this.value)" onKeyUp="validateCompetence_area(this.value)"><span id="competence_areaError" class="error">  <?php echo  $competence_areaErr;?></span></td>
            </tr>
            <tr>
                <td>current_situation: </td>
                <td><input id="current_situation" type="text"  name="userInput" maxlength="20" onBlur="validateCurrent_situation(this.value)" onKeyUp="validateCurrent_situation(this.value)"> <span id="current_situationError" class="error">  <?php echo  $current_situationErr;?></span></td>
            </tr>

            <tr>
                <td>expected_outcome:</td>
                <td><input type="text" id="expected_outcome" name="userInput"  onBlur="validateExpected_outcome(this.value)" onKeyUp="validateExpected_outcome(this.value)" maxlength="80" size="25"><span id="expected_outcomeError" class="error">  <?php echo  $expected_outcomeErr;?></span></td>

            </tr>
            <tr>
                <td>training_70: </td>
                <td><input type="text" name="userInput" id="training_70"  onKeyUp="validateTraining_70(this.value,1)"  onBlur="validateTraining_70(this.value,1)"><span id="training_70Error" class="error">  <?php echo  $training_70Err;?></span></td>
            </tr>
            <tr>
                <td>training_20</td>
                <td><input type="text" name="userInput" id="training_20"  onKeyUp="validateTraining_20(this.value,2)"  onBlur="validateTraining_20(this.value,2)"><span id="training_20Error"  class="error">  <?php echo  $training_20Err;?></span></td>
            </tr>
            <tr>
                <td>training_10: </td>
                <td><input type="text" name="userInput" id="training_10"  maxlength="15" size="10" onBlur="validateTraining_10(this.value)" onKeyUp="validateTraining_10(this.value)"><span id="training_10Error" class="error">  <?php echo  $training_10Err;?></span></td>
            </tr>
            <tr>
                <td>aspirations: </td>
                <td><input id="aspirations" type="text"  name="userInput" maxlength="20" onBlur="validateAspirations(this.value)" onKeyUp="validateAspirations(this.value)"><span id="aspirationsError" class="error">  <?php echo  $aspirationsErr;?></span></td>
            </tr>
            <tr>
                <td>comments: </td>
                <td><input  type="text" id="comments" name="userInput" maxlength="20" onBlur="validateComments(this.value)" onKeyUp="validateComments(this.value)"> <span id="commentsError" class="error">  <?php echo  $commentsErr;?></span></td>
            </tr>



        </table>

        <br/>
        <hr/>
            <br/> <br/>

        <input id = "submit" type="submit" name="register_submit" value="Submit" onclick ="return validateForm();">
    </form>