如何使用 Javascript 验证 HTML 表单

Question

Hey guys im currently stuck on HTML Form Validation using Javascript which i find confusing. Any help would be immensely appreciated. The form requirements for this task are as follows:

All fields are required (except student id, and if the user is younger than 18 years old so is identification type and number)

• A title must be selected
• University email address is in a valid email address format
• A valid date must be entered for date of birth
• Using the date of birth entered, a calculation must determine if the user is 18 or more years old. If determined to be 18 or more years old the user must select an identification type and enter an identification number. Based on the identification type chosen will determine the format of identification number required:
  • Drivers License: ####XX
  • Proof of Age: #X###X
  • # Means a digit number, X means any capital alphabetical letter
• 1 or more days of attendance must be selected

The form should not submit unless the requirements are met and required fields should show their corresponding error messages.

I have tried to make javascript work with some corresponding css but have no luck yet. Here is what I have done so far:

function validateForm(form) {

    var valid = true;
    if (!form.fname.value.length) {
        valid = false;
        document.getElementById('fnameRequired').style.display = "inline-block";
        form.fname.style.border = "1px solid #ff0000";
    } else {
        document.getElementById('fnameRequired').style.display = "none";
        form.fname.style.border = "1px solid #ccc";
    }

    if (!form.lname.value.length) {
        valid = false;
        document.getElementById('lnameRequired').style.display = "inline-block";
        form.lname.style.border = "1px solid #ff0000";
    } else {
        document.getElementById('lnameRequired').style.display = "none";
        form.lname.style.border = "1px solid #ccc";
    }
}

Answer 1

you should validate by CSS before using javascript https://webdevtrick.com/html-css-form-validation/

there are many ways to check the input, especially for standard types like EMAIL URL NUMBER it is even easier

Answer 2

HTML 表单可以通过外部或内部 CSS 链接进行验证