Validate all input fields inside a div using jQuery

Question

I am using below jQuery function to validate all fields inside a div. My problem is it always return false even I fill all the fields.

function validate(id) {
            //:text, :checkbox, select, textarea
            var isFormValid = true;
            var div = $(id);
            $(div).find(":text, select").each(function () {
                if (this.value == "" && !$(this).hasClass("no-req")) {
                    $(this).addClass("required");
                    isFormValid = false;
                    $(this).focus();
                }
                else {
                    $(this).removeClass("required");
                }
            });
            if (!isFormValid) {
                alert("Please fill all the higlighted fields!");
            }
            return isFormValid;

        }

On Asp.net button client click I am using this code

 <asp:Button ID="btnSave" runat="server" Text="Save" class="btn btn-success" OnClientClick="javascript: return validate('#tdAdd');"   OnClick="btnSave_Click" />

The function seems to work fine -> https://jsfiddle.net/s5rfhsa9/1/ — adeneo, Jun 23 '17 at 22:40
Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer, Jun 24 '17 at 08:02

score 0 · Answer 1 · answered Jun 23 '17 at 22:35

0

Change this:

$(div).find(":text, select").each(function () {
    if (this.val() == "" && !$(this).hasClass("no-req")) {

To:

div.find(":text, select").each(function () {
    if ($(this).val() == "" && !$(this).hasClass("no-req")) {

answered Jun 23 '17 at 22:35

mjw

1,196
1
12
19

question tagged as jQuery, that is not jQuery. https://stackoverflow.com/questions/4524702/jquery-function-val-is-not-equivalent-to-this-value – mjw Jun 23 '17 at 22:45

score 0 · Answer 2 · answered Jun 24 '17 at 10:51

Why not use a build-in aspnet Custom Validator? You can then search all TextBoxes inside a specific div and return the Validator value.

<div id="validateTheseControls">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br />
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

    <asp:CustomValidator ID="CustomValidator1" runat="server" 
    ClientValidationFunction="validateControlsInDiv" ErrorMessage="Not all fields are filled"></asp:CustomValidator>
</div>

<script type="text/javascript">
    function validateControlsInDiv(sender, element) {
        var isValid = true;

        $('#validateTheseControls input[type="text"]').each(function () {
            if ($(this).val() == "") {
                isValid = false;
            }
        });

        element.IsValid = isValid;
    }
</script>

Validate all input fields inside a div using jQuery

2 Answers2