0

I have gone through multiple links to validate modal and tried with the below code snippet. I am not sure what is the issue the modal is not validated and error messages are not showing up.

Here is my HTML

<button class="btn btn-primary" data-toggle="modal" data-target='#sendModal' type="button">Contact <span class="icon glyphicon "></span></button>   

        <div class="modal fade" id="sendModal" role="dialog">
    <div class="modal-dialog" >
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h5 class="modal-title">Contact</h5>
        </div>
        <div class="modal-body">

            <div class="form-group">
                <label for="subject">Subject :</label>
                <input class="form-control" id="subject" name="subject" type="text" >
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" id="check1"type="checkbox" name="sp[]" value="1" >
                    <label class="form-check-label" for="check1">
                        Check1
                    </label>

                </div>
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input " id="check2" type="checkbox" name="sp[]"value="2" >
                    <label class="form-check-label" for="check2">
                        Check2
                    </label>

                </div>
            </div>
        </div>
            <div class="modal-footer">
                <button type="button" id="btnSend" class="btn btn-primary">Send </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>

</div>

Javascript function to validate

 $(document).ready(function () {
$("#sendModal").validate({
            rules: {
                'sp[]': {
                    required: true,
                    minlength: 1
                },
                subject: "required"
            },
            messages: {
                'sp[]': "Please select atleast one type of check",
                    subject: "Please enter subject"
            }
        });

         $("#btnSend").click(function () {
         var isValid = $("#sendModal").validate();
         });
});

When i clicked on Send button,even though i did not enter subject text box or did not check any check box,the form is getting submitted with out showing error messages.

Please let me know how to show error message when user did not check any check box and did not enter subject and message should show in red font color below text box and check box.

AMDI
  • 895
  • 2
  • 17
  • 40
  • Are you using jQueryValidation plug-in? Your syntax suggested it. Did you include the proper CDNs? Your HTML is also incomplete as there is no FORM tag anywhere. – Kasey Chang May 20 '20 at 05:32
  • Applying `validate()` to a `div` doesn't really make sense ... my guess is it should be applied to a `form`. – Don't Panic May 20 '20 at 07:19
  • ... aaaand as is almost always the case with jQuery questions, there are duplicates if you look. There are no new jQuery questions! :-) – Don't Panic May 20 '20 at 07:20
  • @KaseyChang - I am using Jquery validation and included all the cdns. I am not using ,
    tag as it is modal.
     – AMDI May 20 '20 at 11:51
  • @Don'tPanic - I tried applying
    tag ,but still form is submitting with out validating.
     – AMDI May 20 '20 at 11:53
  • `I am not using ,
    tag as it is modal` - I am not sure what you mean, you can use a form in a modal, and as the duplicate I linked shows, you need a form. You are also calling it incorrectly - remove the click handler completely. All you need is `$("#sendModal").validate({ ... });`. Check the duplicate, check the docs.
     – Don't Panic May 20 '20 at 12:20
  • @Don'tPanic - Thanks for suggestion.Now after adding form tag it is getting validated. – AMDI May 20 '20 at 12:54
  • Perhaps a better question was WHAT made you conclude that "because it's modal, I don't need FORM tags"? The proper way to do it was to use form tags, but set the target to nothing and JavaScript intercept the post action with preventdefault. – Kasey Chang May 20 '20 at 16:22
  • @AMDI no problem - I suggest you close this as a duplicate of the question I linked. – Don't Panic May 20 '20 at 23:24

1 Answers1

-1

you could always just add required attribute inside the input tags.

coldworld2k19
  • 11
  • 3