Question

181

How to correctly validate a modal form

rated 0 times [ 183] [ 2] / answers: 1 / hits: 97712 / 9 Years ago, mon, january 25, 2016, 12:00:00

I can't seem to get validation to work on my bootstrap modal, I have struggled with several of the examples that I have encountered.

What is the correct way to validate a bootstrap modal?

My HTML:

 <div class=modal fade id=addMyModal role=dialog>

    <div class=modal-dialog>

        <div class=modal-content>

            <div class=modal-header>

                <button type=button class=close data-dismiss=modal>&times;</button>

                <h4 class=modal-title>Add Stuff</h4>

            </div>

            <div class=modal-body>

                <form class=form-control role=form id=newModalForm>

                    <div class=form-group>

                        <label class=control-label col-md-3 for=email>A p Name:</label>

                        <div class=col-md-9>

                            <input type=text class=form-control required error id=pName name=pName placeholder=Enter a p name />

                        </div>

                    </div>

                    <div class=form-group>

                        <label class=control-label col-md-3 for=email>Action:</label>

                        <div class=col-md-9>

                            <input type=text class=form-control id=action placeholder=Enter and action>

                        </div>

                    </div>

                </form>

            </div>

            <div class=modal-footer>

                <button type=button class=btn btn-success id=btnSaveIt>Save</button>

                <button type=button class=btn btn-default id=btnCloseIt data-dismiss=modal>Close</button>

            </div>

        </div>

    </div>

</div>

My Javascript:

$(function () {        



    $(#newModalForm).validate({

        rules: {

            pName: {

                required: true,

                minlength: 8

            },

            action: required

        },

        messages: {

            pName: {

                required: Please enter some data,

                minlength: Your data must be at least 8 characters

            },

            action: Please provide some data

        }

    });

});

Based upon my code nothing appears to happen when I click the save button on modal. I am utilizing the jquery.validate.js script.

Can someone point me in the right direction?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arthur

Add To Favorites

Follow

Total Points: 729

Total Questions: 107

Total Answers: 109

Location: China

Member since Mon, Aug 22, 2022

2 Years ago

arthur questions

1 Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) rollup vue package

Thu, Sep 2, 21, 00:00, 3 Years ago

1 Formik & Yup: How to validate if the provided date is eighteen years old?

Mon, Oct 19, 20, 00:00, 4 Years ago

1 Angular 9 how to use debouncetime for input change event (keyup)

Thu, Apr 30, 20, 00:00, 4 Years ago

1 Swiper and current page index

Wed, Feb 19, 20, 00:00, 4 Years ago

1 Google Maps API Billing not Enabled Error - Billing not open

Fri, Jan 10, 20, 00:00, 4 Years ago

View All

answered 9 Years ago emilianoc · Accepted Answer

You have two issues:

You're button needs to be set to type=submit not type=button

Your submit button should be inside your form tag.

See working example Snippet.

$(function() {



  $(#newModalForm).validate({

    rules: {

      pName: {

        required: true,

        minlength: 8

      },

      action: required

    },

    messages: {

      pName: {

        required: Please enter some data,

        minlength: Your data must be at least 8 characters

      },

      action: Please provide some data

    }

  });

});

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js></script>

<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js></script>

<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css rel=stylesheet />

<button type=button class=btn btn-info btn-lg data-toggle=modal data-target=#addMyModal>Open Modal</button>

<div class=modal fade id=addMyModal role=dialog>

  <div class=modal-dialog>

    <div class=modal-content>

      <div class=modal-header>

        <button type=button class=close data-dismiss=modal>&times;</button>

        <h4 class=modal-title>Add Stuff</h4>

      </div>

      <div class=modal-body>

        <form role=form id=newModalForm>

          <div class=form-group>

            <label class=control-label col-md-3 for=email>A p Name:</label>

            <div class=col-md-9>

              <input type=text class=form-control id=pName name=pName placeholder=Enter a p name require/>

            </div>

          </div>

          <div class=form-group>

            <label class=control-label col-md-3 for=email>Action:</label>

            <div class=col-md-9>

              <input type=text class=form-control id=action name=action placeholder=Enter and action require>

            </div>

          </div>

          <div class=modal-footer>

            <button type=submit class=btn btn-success id=btnSaveIt>Save</button>

            <button type=button class=btn btn-default id=btnCloseIt data-dismiss=modal>Close</button>

          </div>

        </form>

      </div>

    </div>

  </div>

</div>