how to stop form submit if empty fields?

my website is based off of only one php index file that changes the contents of the site based on the header variables. www.mydomain.com/?page=contact loads and brings up a form that i am having the user fill out.

i have some jQuery that SHOULD detect if there are any missing fields:

$("form").submit(function() {
    var isFormValid = true;
    $(".required").each(function() {
        if ($.trim($(this).val()) == "") {
            $(this).addClass("highlight");
            isFormValid = false;
        } else {
            $(this).removeClass("highlight");
        }
        if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");
        return isFormValid;
    });
});

but it is not working....

标签： php jquery forms

3条回答

不美不萌又怎样

2楼-- · 2019-07-20 03:15

Maybe something like this?

$("form").submit(function() {
    var isFormValid = true;
    $(".required").each(function() {
        if ($.trim($(this).val()) == "") {
            $(this).addClass("highlight");
            isFormValid = false;
        } else {
            $(this).removeClass("highlight");
        }
    });
    // the following lines should be placed here
    if (!isFormValid) {
        alert("Please fill in all the required fields (indicated by *)");
    }
    return isFormValid;
});

Or even shorter:

$("form").submit(function() {
    var isFormValid = $(".required").removeClass("highlight").filter(function() {
        return $.trim(this.value) == "";
    }).addClass("highlight").length == 0;

    if (!isFormValid) {
        alert("Please fill in all the required fields (indicated by *)");
    }
    return isFormValid;
});

DEMO: http://jsfiddle.net/YS6gw/

0人赞添加讨论(0) 举报

够拽才男人

3楼-- · 2019-07-20 03:16

Put return isFormValid out of loop (otherwise you are overwriting its value again and again):

$("form").submit(function() {
    var isFormValid = true;
    $(".required").each(function() {
        if ($.trim($(this).val()) == "") {
            $(this).addClass("highlight");
            isFormValid = false;
        } else {
            $(this).removeClass("highlight");
        }

    });

    if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");
    return isFormValid; // put out of loop
});

0人赞添加讨论(0) 举报

三岁会撩人

4楼-- · 2019-07-20 03:17

Can you post the html works perfectly fine for me. 
Here is my Code :
------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>

    <script type="text/javascript"  src="http://code.jquery.com/jquery-latest.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){
            $("form").submit(function() {
                var isFormValid = true;
                $(".required").each(function() {
                    if ($.trim($(this).val()) == "") {
                        $(this).addClass("highlight");
                        isFormValid = false;
                    } else {
                        $(this).removeClass("highlight");
                    }
                    if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");
                    return isFormValid;
                });
            });

        });

    </script>

    <style type="text/css">
        #divMain {vertical-align: bottom;}
        .div1_style {background: #ffe4b5}
        .div2_style {background: #79b7e7}
        .highlight {background: #cd0a0a}
        .div_disabled_style {background: #6f6e73}
    </style>
</head>
<body>
<form action="#" method="post">
<div id="divMain" align="center">
    <div id="div1" class="div2_style">
        <input type="checkbox" id="checkBox1">
        <input type="text" class ="required"  id="text1"/>
        <input type="text" class ="required" id="text2"/>
        <input type="text" class ="required" id="text3"/>
        <button type="submit" id="btnSubmit">Submit</button>
    </div>
</div>
</form>
</body>
</html>

0人赞添加讨论(0) 举报

how to stop form submit if empty fields?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间