CODEWITHSUNDEEP
jquerytwitter-bootstrapmodal-dialogjquery-validate
zeid10
zeid10

Reputation: 521

What is the proper way to validate a form with as bootstrap modal using jquery plugin validator

I am trying to validate a form that is inside a bootstrap Modal, however when the page is loaded the validate function in the plug in does not find the form because it has been hidden by the Modal class. How can i validate the form before it goes away with the modal. i have tried using validate() when i click in my action to open the modal but i keep getting the following error message when i try to submit: TypeError: $element[0] is undefined Here is the code(JS) i am using to validate when i click on the "Save changes" button:

 $('#SavePortInfo').click(function() {
            $("#PortNumberForm").validate();
                var ValidStatus = $("#PortNumberForm").valid();

                if (ValidStatus == false) {
                    console.log('Form no GOOD');
                }else
                {
                    $("#PortNumberForm").submit();
                }

        });

Here is my code for my modal

<div id="PortNumberModal" class="modal fade">
    <div class="modal-dialog" style="width:60%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                <h4 class="modal-title">Port Number Information</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="PortNumberForm" name="PortNumberForm">
                    <fieldset>

                        <!-- Form Name -->


                        <!-- Prepended checkbox -->
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="VOIP-PORT-5">Acknowledge Disconnect of Previous Phone</label>
                            <div class="col-md-2">
                                <div class="input-group">
  <span class="input-group-addon">
      <input type="checkbox" class="required">
  </span>
                                    <input id="VOIP-PORT-5" name="VOIP-PORT-5" class="form-control required" placeholder=""  type="text">
                                </div>

                            </div>
                        </div>

                        <!-- Text input-->
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="VOIP-PORT-4B">CIty on Previous Phone Account</label>
                            <div class="col-md-4">
                                <input id="VOIP-PORT-4B" name="VOIP-PORT-4B" placeholder="CIty on Previous Phone Account" class="form-control input-md required"  type="text">
                                <span class="help-block">Please enter the city from your current telephone account</span>
                            </div>
                        </div>

                        <!-- Text input-->
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="VOIP-PORT-4A">The First Line of the Address on my Current Phone Account</label>
                            <div class="col-md-4">
                                <input id="VOIP-PORT-4A" name="VOIP-PORT-4A" placeholder="placeholder" class="form-control input-md required" required type="text">

                            </div>
                        </div>

                        <!-- Text input-->
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="VOIP-PORT-3">The Name on my Current Phone Account</label>
                            <div class="col-md-4">
                                <input id="VOIP-PORT-3" name="VOIP-PORT-3" placeholder="placeholder" class="form-control input-md required" required type="text">

                            </div>
                        </div>

                        <!-- Text input-->
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="VOIP-PORT-2">My Current Phone Number</label>
                            <div class="col-md-4">
                                <input id="VOIP-PORT-2" name="VOIP-PORT-2" placeholder="" class="form-control input-md required" required type="text">

                            </div>
                        </div>

                        <!-- Text input-->
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="VOIP-PORT-4-ZIP">The Zip Code of the Address on my Current Phone Account</label>
                            <div class="col-md-4">
                                <input id="VOIP-PORT-4-ZIP" name="VOIP-PORT-4-ZIP" placeholder="" class="form-control input-md required" required type="text">

                            </div>
                        </div>


                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="SavePortInfo">Save changes</button>
                </form>
            </div>
            <div class="modal-footer">

            </div>

        </div>
    </div>
</div>

Any help is appreciated.thank you.

Upvotes: 0

Views: 856

Answers (2)

Sparky
Sparky

Reputation: 98738

Your code...

$('#SavePortInfo').click(function() {
    $("#PortNumberForm").validate();
    var ValidStatus = $("#PortNumberForm").valid();

    if (ValidStatus == false) {
        console.log('Form no GOOD');
    } else {
        $("#PortNumberForm").submit();
    }
});

You don't need to call .validate() within the click handler. The .validate() method is only supposed to be called once on DOM ready to initialize the plugin on your form. Since the click of the submit button is captured automatically, no click handler is usually required. However, I see you have a type="button", so in this case you need the click handler.

Simply pull out the .validate() method so that the form validation is initialized and ready before the first click. Also, so that you don't call .validate() repeatedly. Since all subsequent calls to .validate() are effectively ignored, it's unnecessarily running the code every time the button is clicked.

$(document).ready(function() {

    $("#PortNumberForm").validate();  // initialize plugin

    $('#SavePortInfo').click(function() {  // capture click and test/submit
        var ValidStatus = $("#PortNumberForm").valid();

        if (ValidStatus == false) {
            console.log('Form no GOOD');
        } else {
            $("#PortNumberForm").submit();
        }
    });

});

You are also missing the name attribute on your checkbox...

<span class="input-group-addon">
     <input type="checkbox" class="required">
</span>

The jQuery Validate plugin cannot work on elements that do not contain a unique name attribute as that's how this plugin keeps track of everything.

<span class="input-group-addon">
     <input type="checkbox" name="foo" class="required">
</span>

Upvotes: 3

zeid10
zeid10

Reputation: 521

turns out the issue was not in the JS but in the first first input field(radio). It didn't have the attributes name and ID, therefore it was breaking the validator.

Upvotes: 1

Related Questions