Question

<script>

$(document).ready(function() // Run the function after the DOM is ready
{

    var validForm = true; // Set the variable to be true, assume the form is valid

    // Required field. Cannot be empty, spaces, null or undefinded. Contents of the field cannot contain < or > or '. 
    function validateName() 
    {
        var nameInput = $("#custName").val(); // Create a variable that takes in the value of the field
        var nameEx = new RegExp(/<>^[a-zA-Z0-9]*$/); // RegEx of what the field should contain
        var nameTest = nameEx.test(nameInput); // Test the RegEx with the current input

        if(nameInput == "") 
        {
            nameTest = false;
            validForm = false; // Form will be set to false
            var custNameError  = $("#custNameError").html("Please enter a valid name");
        }

        else if (nameInput != "" && !nameTest)
        {
            nameTest = false;
            validForm = false; 
            custNameError  = $("#custNameError").html("Please enter a valid name");
        }

        else 
        {
            custNameError = $("#custNameError").html("");
        }
    };

    // Field is optional. Must be numbers only 
    function validatePhone()
    {
        var phoneInput = $("#custPhone").val();
        var phoneEx = new RegExp(/^[0-9]{10}$/); // 10 digit RegEx from 0-9

        if(phoneEx.test(phoneInput))
        {
            $("#custPhoneError").html("Please enter a valid 10 digit phone number");
            validForm = false;
        }

        else 
        {
            validForm = true;
        }
    };

    // Required field. Can have letters, numbers, symbols, and including @ and . email address. 
    function validateEmail()
    {
        var emailInput = $("#custEmail").val;
        var emailEx = new RegExp (/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/);   
        var emailTest = emailEx.text(emailInput);
        var custEmailError = $("#custEmailError").html("");

        if(!emailTest)
        {
            validForm = false;

            if(emailInput == "")
            {
                custEmailError = $("#custEmailError").html("Please enter a valid email address.");
            }

            else 
            {
                if(emailInput != "" && !emailTest)
                {
                    custEmailError = $("#custEmailError").html("Please enter a valid email in the following format: test123@email.com");
                    $("#custEmail").val(emailInput);
                    validForm = true;
                }
            }
        }   
    };

    // Required field. Must select one radio button
    function validateProduct()
    {
        var productInput = $("input[type=radio]:checked").val();

        if (productInput == undefined)
        {
            var productTest = false;
            validForm = false; 
            var custProductError = $("#custProductError").html("Please select a product in regards to your complaint");
        }

        else if (!validForm)
        {
            $("input[type=radio]:checked").val(productInput);
        }

        else 
        {
            productTest = true;
            custProductError = $("#custProductError").html("");
            validForm = true;
        }

    };

    // Required field. Must be longer than 5 characters, can contain basic punctuation symbols
    function validateComplaint()
    {
        var complaintInput = $("#custComplaint").val();
        var complaintEx = new RegExp (/^[a-zA-Z0-9,.!?;" ]{5,}$/);
        var complaintTest = complaintEx.test(complaintInput);
        var complainLengthInput = complaintInput.length;

        if (complainLengthInput < 5)
        {
            validForm = false; 
            var custComplaintError = $("#custComplaintError").html("Please have your complaint to be at least 5 characters long");
            $("#custComplaint").val(complaintInput);
        }

        else if (complaintTest)
        {
            custComplaintError = $("#custComplaintError").html("");
        }

        else 
        {
            if (complainLengthInput >= 5 && !complaintTest)
            {
                custComplaintError = $("#custComplaintError").html("Please describe your complaint in detail. Using letters and numbers.")
                $("#custComplaint").val(complaintInput);
            }
            else 
            {
                validForm = true;
            }`enter code here`
        }
    };

    function submitForm()
    {
        $("#sendForm").click(function()
        {
            validateName();
            validateEmail();
            validatePhone();
            validateProduct();
            validateComplaint();
        });

        $("#resetForm").click(function()
        {
            $("#custNameError").html("");
            $("#custPhoneError").html("");
            $("#custEmailError").html("");
            $("#custProductError").html("");
            $("#custComplaintError").html("");
        });
    };

});

HTML：

<h2>WDV321 Advanced Javascript </h2>
<h3>Form Validation Project - Complaint Form</h3>
<form id="form1" name="form1" method="post" action="">
  <p>Please enter the following information in order to process your concerns.</p>
  <p> 
    <label for="custName">Name:</label>
        <input type="text" name="custName" id="custName" />
        <span id="custNameError" class="errorMsg"></span>
  </p>
  <p>
    <label for="custPhone">Phone Number: </label>
        <input type="text" name="custPhone" id="custPhone" />
        <span id="custPhoneError" class="errorMsg"></span>
    </p>
    <p>
    <label for="custEmail">Email: </label>
        <input type="text" name="custEmail" id="custEmail" />
        <span id="custEmailError" class="errorMsg"></span>
  </p>
    <p>Please Select Product Group:</p>
    <span class="error" id="custProductError"></span>
  <p>
    <label>
      <input type="radio" name="custProducts" value="books" id="custProducts_0" />
      Books</label>
    <br />
    <label>
      <input type="radio" name="custProducts" value="movies" id="custProducts_1" />
      Movies</label>
    <br />
    <label>
            <input type="radio" name="custProducts" value="electronics" id="custProducts_2" />
            Consumer electronics</label>
    <br />
    <label>
      <input type="radio" name="custProducts" value="computer" id="custProducts_3" />
      Computer</label>
    <br />
  </p>
    <p>Description of problem:  (Limit 200 characters)</p>
    <span class="error" id="custComplaintError"></span>
  <p>

我对自己做错了非常困惑。当点击提交按钮时，它似乎没有运行我的任何功能。谷歌浏览器的控制台没有给我任何错误，并且从我的评论来看，似乎没有看到任何语法错误。请指教。

Answer 1

function submitForm(e) // grab the click event
{
    e.preventDefault();  // prevent default event
    $("#sendForm").click(function()
    {
        validateName();
        validateEmail();
        validatePhone();
        validateProduct();
        validateComplaint();
    });

    $("#resetForm").click(function()
    {
        $("#custNameError").html("");
        $("#custPhoneError").html("");
        $("#custEmailError").html("");
        $("#custProductError").html("");
        $("#custComplaintError").html("");
    });
};

为什么单击提交后我的表单无法验证

1 个答案: