required message shown when none of the fields are filled out

Question

required message shown when none of the fields are filled out

Anjali Agarwal 1,531

I have the following code on my web page:

<div class="form-group row">
                    <div class="col-sm-4">
                        <label asp-for="HomePhone" class="control-label" style="font-weight:bold;"></label>
                        <input asp-for="HomePhone" class="form-control input-lg" placeholder="(___) ___-____" data-slots="_" />
                        <span asp-validation-for="HomePhone" class="text-danger"></span>
                    </div>
                    <div class="col-sm-4">
                        <label asp-for="WorkPhone" class="control-label" style="font-weight:bold;"></label>
                        <input asp-for="WorkPhone" class="form-control input-lg" placeholder="(___) ___-____" data-slots="_" />
                        <span asp-validation-for="WorkPhone" class="text-danger"></span>
                    </div>
                    <div class="col-sm-4">
                        <label asp-for="CellPhone" class="control-label" style="font-weight:bold;"></label>
                        <input asp-for="CellPhone" class="form-control" placeholder="(___) ___-____" data-slots="_" />
                        <span asp-validation-for="CellPhone" class="text-danger"></span>
                    </div>
    </div>
       <div class="form-group" style="margin-top:20px"  >
                    <input style="float: right; margin-bottom:20px" type="submit" value="Submit" class="btn btn-primary" />
        </div>

I want the end users to fill out at least one phone number. If they dont fill out any phone number then I want to display a required message saying that at least one phone number is required. They can fill out all three phone number if they want to. I want this required message to be displayed when the end users click on the submit button. can the message be displayed as a tooltip or in red color text at the bottom of the text box. Can this be accomplished in JavaScript or jQuery.

Currently, I have something like this on my web page. I have all the three phone number as required:

User's image

I am accomplishing this by making them required in the Model class.

Any help will be highly appreciated.

Accepted answer

0 additional answers

Your answer

Answer 1

You can use jQuery to achieve this. First delete the Model class validation. Then try the following code.

<form>
        <div class="form-group row">
    <div class="col-sm-4">
        <label asp-for="HomePhone" class="control-label" style="font-weight:bold;"></label>
        <input asp-for="HomePhone" id="HomePhoneInput" class="form-control input-lg" placeholder="(___) ___-____" data-slots="_" />
    </div>
    <div class="col-sm-4">
        <label asp-for="WorkPhone" class="control-label" style="font-weight:bold;"></label>
        <input asp-for="WorkPhone" id="WorkPhoneInput"class="form-control input-lg" placeholder="(___) ___-____" data-slots="_" />
    </div>
    <div class="col-sm-4">
        <label asp-for="CellPhone" class="control-label" style="font-weight:bold;"></label>
        <input asp-for="CellPhone" id="CellPhoneInput" class="form-control" placeholder="(___) ___-____" data-slots="_" />
    </div>
</div>

<div class="form-group" style="margin-top:20px">
     <alert></alert>
        <input style="float: right; margin-bottom:20px" type="submit" id="myBtn1" value="Submit" class="btn btn-primary" />
</div>
</form>


@section Scripts {
    @{
        <script type="text/javascript">
            $(document).ready(function () {
                $('#myBtn1').click(function (event) {
                    if ((document.getElementById("HomePhoneInput").value == "")&&
                    (document.getElementById("WorkPhoneInput").value == "") &&
                    (document.getElementById("CellPhoneInput").value == "")){
                        $('alert').html("At least one number is required").css('color', 'red');
                        event.preventDefault();
                    }
                });
            });
        </script>

    }
}

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Jerry Fu

Anjali Agarwal 1,531 Reputation points

2023-03-08T18:42:35.9233333+00:00

Thanks. Worked like a charm!

Share via

required message shown when none of the fields are filled out

0 additional answers

Your answer