Question

我是javascript新手。我希望有人向我解释为什么即使验证失败也仍要提交此表单？我不允许使用任何验证插件，因此我编写了一些验证功能。

/* EMAIL VALIDATION */
let validateEmailInput = (anEmail) => {
    let emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    if (anEmail.value.search(emailRegex) !== -1 || anEmail.value.match(emailRegex)) {
        document.getElementById("errorOutput1").innerText = "";
        return true;
    } else {
        document.getElementById("errorOutput1").innerText = "Invalid email!";
        anEmail.focus();
        return false;
    }
}

/* RADIO VALIDATION */
let validateRadioInput = (name) => {
    let radios = document.getElementsByName("part1_radio");
    let isCheckedRadio = false;
    let numRadioChecked = 0;
    let radioChosen;

    for (let i = 0; i < radios.length && !isCheckedRadio; i++) {
        if (radios[i].checked) {
            numRadioChecked++;
            document.getElementById("errorOutput2").innerText = "";
            radioChosen = radios.item(i).id;
            isCheckedRadio = true;
        }
    } //end for
    if (numRadioChecked === 0) {
        document.getElementById("errorOutput2").innerText = "Please select one season!";
        isCheckedRadio = false;
    }
    return isCheckedRadio;
}


/* CHECKBOX VALIDATION */
let validateCheckboxInput = (name) => {
    let checkboxGroup = document.getElementsByName("part1_checkbox");
    let isCheckedCheckbox = false;
    let numCheckboxChecked = 0;
    let checkboxChosen;

    for (let i = 0; i < checkboxGroup.length && !isCheckedCheckbox; i++) {
        if (checkboxGroup[i].checked) {
            numCheckboxChecked++;
            document.getElementById("errorOutput3").innerText = "";
            checkboxChosen = checkboxGroup[i];
            isCheckedCheckbox = true;
        } else {
           // if (numCheckboxChecked === 0) {
            document.getElementById("errorOutput3").innerText = "Please check at least one country!";
            isCheckedCheckbox = false;
        }
    } // end for

    return isCheckedCheckbox;
}

/* SELECT/OPTIONS VALIDATION */
let validateSelectInput = (aSelection) => {
    let selectGroup = document.getElementsByName("part1_select");
    let isCheckedSelect = false;
    let numCheckedSelect = 0;
    let selectedVar;

    if (!selectGroup.value) {
        document.getElementById("errorOutput4").innerText = "Please choose one!";
        isCheckedSelect = false;
    } else {
        isCheckedSelect = true;
        selectedVar = selectGroup.value;
    }
    return isCheckedSelect;
}

此函数被称为内联：

<form id="myForm_part1" name="myForm_part1"action="someemailhere" method="post" onsubmit="validateForm(this.form);" novalidate>

我需要帮助来了解为什么会这样。

function validateForm(form) {

    let email = document.getElementById("part1_email");
    let radioChoice = document.getElementsByName("part1_radio");
    let checkboxChoice = document.getElementsByName("part1_checkbox");
    let selectChoice = document.getElementById("part1_select");

    $('#myForm_part1').submit(function() {
        if (!validateEmailInput(email) || !validateRadioInput(radioChoice)
        || !validateCheckboxInput(checkboxChoice) || !validateSelectInput(selectChoice)) {
        return false;
        }
    });
}

Answer 1

onsubmit处理程序存在问题。尝试更改

   onsubmit="validateForm(this.form);"

到

   onsubmit = "return validateForm(this.form);"

没有return语句的提交处理程序是根据属性值编译而成的函数，它返回undefined，因为它没有return语句。

>

Answer 2

如果验证失败，请使用preventDefault()停止提交。

function validateForm(form) {

    let email = document.getElementById("part1_email");
    let radioChoice = document.getElementsByName("part1_radio");
    let checkboxChoice = document.getElementsByName("part1_checkbox");
    let selectChoice = document.getElementById("part1_select");

    $('#myForm_part1').submit(function(event) {
        if (!validateEmailInput(email) || !validateRadioInput(radioChoice)
        || !validateCheckboxInput(checkboxChoice) || !validateSelectInput(selectChoice)) {
            event.preventDefault();
        }
    });
}

为什么即使验证未通过，此表单仍要继续提交？

2 个答案: