JavaScript表单验证无法提交

Question

I have a form where the user enters up to 5 subjects and 5 dates which is coded as follows:

    <h2>Input subjects</h2>
        <form name = "subjInput" onsubmit="validateForm()" method="post" action="input.php" >
        <table>
            <tr><td><h3>Subject title</h3></td><td><h3>Subject date</h3></td><tr>
            <tr><td><input type="text" name="subjName1"  size="15" placeholder = "e.g. Biology" required pattern=".{2, 20}"></td>
                <td><input type="date" name="subjDate1"  size="15" min="01/01/2015" max="01/01/2020"></td></tr>
            <tr><td><input type="text" name="subjName2"  size="15" placeholder = "e.g. Biology" required pattern=".{2, 20}"></td>
                <td><input type="date" name="subjDate2"  size="15" min="01/01/2015" max="01/01/2020"></td></tr>
            <tr><td><input type="text" name="subjName3"  size="15" placeholder = "e.g. Biology" required pattern=".{2, 20}"></td>
                <td><input type="date" name="subjDate3"  size="15" min="01/01/2015" max="01/01/2020"></td></tr>
            <tr><td><input type="text" name="subjName4"  size="15" placeholder = "e.g. Biology" pattern=".{2, 20}"></td>
                <td><input type="date" name="subjDate4"  size="15" min="01/01/2015" max="01/01/2020" ></td></tr>
            <tr><td><input type="text" name="subjName5"  size="15" placeholder = "e.g. Biology" pattern=".{2, 20}"></td>
                <td><input type="date" name="subjDate5"  size="15" min="01/01/2015" max="01/01/2020" ></td></tr>
        </table>
            <br></br>
             <input type="submit" name="submit" value="Submit" style="color:white">
        </form>

The JavaScript validation is this:

    <script>
    function validateForm(){
    var name1 = document.forms["subjInput"]["subjName1"].value;
    var name2 = document.forms["subjInput"]["subjName2"].value;
    var name3 = document.forms["subjInput"]["subjName3"].value;
    var name4 = document.forms["subjInput"]["subjName4"].value;
    var name5 = document.forms["subjInput"]["subjName5"].value;
    var date1 = document.forms["subjInput"]["subjDate1"].value;
    var date2 = document.forms["subjInput"]["subjDate2"].value;
    var date3 = document.forms["subjInput"]["subjDate3"].value;
    var date4 = document.forms["subjInput"]["subjDate4"].value;
    var date5 = document.forms["subjInput"]["subjDate5"].value;
    var length1 = name1.length;
    var length2 = name2.length;
    var length3 = name3.length;
    var length4 = name4.length;
    var length5 = name5.length;
    var smalldate = new date(01/01/2015);
    var largedate = new date(01/01/2020);
    if(name1 == null || name1 == ""){
        alert('Oops! Please input a subject name into row 1.');
        return false;
                }
    if(name2 == null || name2 == ""){
        alert('Oops! Please input a subject name into row 2.');
        return false;
                }
    if(name3 == null || name3 == ""){
        alert('Oops! Please input a subject name into row 3.');
        return false;
                }
    if (name4 == null || name4 == "") && (date4 != null || date4 != ""){
        alert('Oops! Please input a subject name into row 4.');
        return false;
                }
    if (name5 == null || name5 == "") && (date5 != null || date5 != ""){
        alert('Oops! Please input a subject name into row 5.');
        return false;
                }                   
    if ((name1 == name2) || (name2 == name3) || (name3 == name1) {
        alert('Oops! Two subject names are the same');
        return false;
                }
    if(length1 < 2){
        alert('Oops! The first subject name should be longer than 2 characters.');
        return false;
    }       
    if(length2 < 2){
        alert('Oops! The two subject name should be longer than 2 characters.');
        return false;
    }
    if(length3 < 2){
        alert('Oops! The third subject name should be longer than 2 characters.');
        return false;
    }
    if(length1 > 20){
        alert('Oops! The first subject name should be shorter than 20 characters.');
        return false;
    }
    if(length2 > 20){
        alert('Oops! The second subject name should be shorter than 20 characters.');
        return false;
    }
    if(length3 > 20){
        alert('Oops! The third subject name should be longer than 20 characters.');
        return false;
    }
    if((name4 != null) && (length4 < 2){
        alert('Oops! The fourth subject name should be longer than 2 characters.');
        return false;
    }
    if((name5 != null) && (length5 < 2){
        alert('Oops! The fifth subject name should be longer than 2 characters.');
        return false;
    }
    if((name4 != null) && (length4 > 20){
        alert('Oops! The fourth subject name should be shorter than 20 characters.');
        return false;
    }
    if((name5 != null) && (length5 > 20){
        alert('Oops! The fourth subject name should be longer than 20 characters.');
        return false;
    }
    if((date1!=null) && (date1 < smalldate)){
        alert('Oops! The first exam date should be after 01/01/2015.');
        return false;       
    }
    if((date2!=null) && (date2 < smalldate)){
        alert('Oops! The second exam date should be after 01/01/2015.');
        return false;       
    }
    if((date3!=null) && (date3 < smalldate)){
        alert('Oops! The third exam date should be after 01/01/2015.');
        return false;       
    }
    if((date4!=null) && (date4 < smalldate)){
        alert('Oops! The fourth exam date should be after 01/01/2015.');
        return false;       
    }
    if((date5!=null) && (date5 < smalldate)){
        alert('Oops! The fifth exam date should be after 01/01/2015.');
        return false;       
    }
    if((date1!=null) && (date1 > largedate)){
        alert('Oops! The first exam date should be before 01/01/2020.');
        return false;       
    }
    if((date2!=null) && (date2 > largedate)){
        alert('Oops! The second exam date should be before 01/01/2020.');
        return false;       
    }
    if((date3!=null) && (date3 > largedate)){
        alert('Oops! The third exam date should be before 01/01/2020.');
        return false;       
    }
    if((date4!=null) && (date4 > largedate)){
        alert('Oops! The fourth exam date should be before 01/01/2020.');
        return false;       
    }
    if((date5!=null) && (date5 > largedate)){
        alert('Oops! The fifth exam date should be before 01/01/2020.');
        return false;       
    }
    else{
        return true;
    }
    }
</script>

It's only a simple form - I have tried entering invalid data and it isn't working. How can I get it to work?

Answer 1

它似乎工作正常。

Here is the jsfiddle of your form - http://jsfiddle.net/8vv1qx65/