Home/ Questions/Q 7184843
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T18:17:05+00:00

I have two select elements: hours and minutes. If one or both fields are

  • 0

I have two select elements: hours and minutes. If one or both fields are left blank I need an error to appear. I have been using the errorPlacement function to place just one error, but when you correct that one field, the error disappears but the other field is still invalid.

I have tried various combinations of validator.addMethod but there are always issues where both errors will show, or no errors will show etc.

Has anyone faced this issue before? Or does anyone know of a way to detect and handle the errors in the correct way?

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not sure which field is required in your example, but you may be looking for dependency expression for jquery Validation. For example, if you wanted to make minutes required only if hours has a value, you would setup the validation like this:

    rules: {
    minutes: {
      required: "#hours:filled"
    }
}

    If this is not your desired logic, you will most likely have to create a custom validation method. Is this the logic you had in mind?

    For reference:

    jQuery Validation Dependency Expression

    Edit:

    Here is a custom validator:

    jQuery.validator.addMethod("hoursMinutes", function (value, element, param) {
    return $("#hours").val() != "" && $("#minutes").val() != "";
}, "Please enter both hours and minutes.");

validator.settings.rules = {
    hours: { hoursMinutes: true }
}

    This will make only 1 error message show up.

    Edit #2:

    Try this.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            var validator = $("#form1").validate({
                highlight: function (element, errorClass) {
                    $(element).addClass("invalid");
                },
                unhighlight: function (element, errorClass) {
                    $(element).removeClass("invalid");
                },
                groups: { time: "hours minutes" },
                errorPlacement: function (error, element) {
                    $("#errors").append(error);
                },
                messages: {
                    hours: { required: "Please enter both hours and minutes." },
                    minutes: { required: "Please enter both hours and minutes." }
                },
                showErrors: function (errorMap, errorList) {
                    this.defaultShowErrors();

                    if ($("#hours:filled, #minutes:filled").length == 2) {
                        $("#errors label").hide();
                    }
                    else {
                        $("#errors label").show();
                    }
                }
            });

            $("#submitBtn").click(function () {
                if ($("#form1").valid()) {
                    alert("valid");
                }

                return false;
            });
        });
    </script>
    <style type="text/css">
        .invalid
        {
            border: solid 1px red;
        }
    </style>
</head>
<body>
    <form id="form1" action="" method="post">
    <div id="errors">
    </div>
    <input id="hours" name="hours" type="text" class="required" />
    <input id="minutes" name="minutes" type="text" class="required" />
    <button id="submitBtn">
        Go</button>
    </form>
</body>
</html>
    • 0