Question

我正在创建一个基本的表单验证器，但出于某种原因，如果有人可以提供帮助，它永远不会启动else语句。

我确信这是愚蠢的，但我的印象是，点击它会运行条件，如果全部失败则返回false;将它返回到开始。

$('.get-results').click(function(e) {
        e.preventDefault();
        var get_results = $('.get-results'),
            input_h8_val = $('.input_h8_val'),
            input_h10_val = $('.input_h10_val'),
            input_h12_val = $('.input_h12_val'),
            input_h14_val = $('.input_h14_val'),
            input_h16_val = $('.input_h16_val'),
            input_h20_val = $('.input_h20_val'),
            input_h21_val = $('.input_h21_val'),
            input_h23_val = $('.input_h23_val');

        if (input_h8_val.val() == 0) {
            $(input_h8_val).next('.error').show();
        } else if (input_h10_val.val() == 0) {
            $(input_h10_val).next('.error').show();
        } else if (input_h12_val.val() == 0) {
            $(input_h12_val).next('.error').show();
        } else if (input_h14_val.val() == 0) {
            $(input_h14_val).next('.error').show();
        } else if (input_h16_val.val() == 0) {
            $(input_h16_val).next('.error').show();
        } else if (input_h20_val.val() == 0) {
            $(input_h20_val).next('.error').show();
        } else if (input_h21_val.val() == 0) {
            $(input_h21_val).next('.error').show();
        } else if (input_h23_val.val() == 0) {
            $(input_h23_val).next('.error').show();
        } 
        else {
            console.log("worked");
            $('#first-wrapper').hide();
            $('.predicted').addClass('active');
            $('.predicted').addClass('no-left-radius');
            $('.orders').addClass('no-right-radius');
            $('#second-wrapper').show();
            $('#third-wrapper').hide();
            do_calculations();
        }

    });

JSFiddle

Answer 1

提供的代码对我有用，但您必须记住以下几点：

1 - 如果用户在某处填写“0”（默认情况下“在线订单的百分比是多少？”），验证将失败。

2 - next()仅查找紧随兄弟 link。因此在某些情况下，触发时不会显示错误。（输入元素后面有另一个span。）

解决此问题的方法：

$(element).parent().find(".error").show();

Answer 2

<!DOCTYPE html>
<html lang="en">

<head>
<title>Form Validation Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width" intial-scale="1">
    <link rel="stylesheet" type="text/css" href="G:/bootstrap-3.3.6-dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post" action="mailto:Frank@cohowinery.com" 
name="ContactForm" onsubmit="return ValidateContactForm();">
    <p>Name: <input type="text" size="30" name="Name"></p>
    <p>E-mail Address:  <input type="text" size="30" name="Email"></p>
    <p>Telephone: <input type="number" size="30" name="Telephone"><br>
        <input type="checkbox" name="DoNotCall" 
        onclick="EnableDisable(this);"> Please do not call me.</p>
    <p>What can we help you with?
        <select type="text" value="" name="Subject">
            <option>  </option>
            <option>Customer Service</option>
            <option>Question</option>
            <option>Comment</option>
            <option>Consultation</option>
            <option>Other</option>
        </select></p>
    <p>Comments:  <textarea cols="55" name="Comment">  </textarea></p>
    <p><input type="submit" value="Send" name="submit">
    <input type="reset" value="Reset" name="reset"></p>
</form>

</body>

<script>
function ValidateContactForm()
{
    var name = document.ContactForm.Name;
    var email = document.ContactForm.Email;
    var phone = document.ContactForm.Telephone;
    var nocall = document.ContactForm.DoNotCall;
    var what = document.ContactForm.Subject;
    var comment = document.ContactForm.Comment;

    if (name.value == "")
    {
        window.alert("Please enter your name.");
        name.focus();
        return false;
    }

    if (email.value == "")
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    if (email.value.indexOf("@", 0) < 0)
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    if (email.value.indexOf(".", 0) < 0)
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }

    if ((nocall.checked == false) && (phone.value == ""))
    {
        window.alert("Please enter your telephone number.");
        phone.focus();
        return false;
    }

    if (what.selectedIndex < 1)
    {
        alert("Please tell us how we can help you.");
        what.focus();
        return false;
    }

    if (comment.value == "")
    {
        window.alert("Please provide a detailed description or comment.");
        comment.focus();
        return false;
    }
    return true;
}

function EnableDisable(chkbx)
{
    if(chkbx.checked == true)
    {
        document.ContactForm.Telephone.disabled = true;
    }
    else
    {
        document.ContactForm.Telephone.disabled = false;
    }
}
</script>

</html>

表格验证

2 个答案: