Unable to use the jQuery form validation plugin inside an angular application

advertisements

I have recently upgraded my site to a Single-page-application configuration using AngularJS. Ever since Im not able to use jQuery form validation plugin. I have included all the needed files and checked that the path is correct, but seems like the validation is made in the browser, rather than in my code.

The application is divided to several HTML files, which are dynamically injected into index.html. The order which I included the required files is:

  • All CSS files are loaded in the Head, then some code, including <div ng-view></div>.
  • Then I load the JS files: jquery, jquery validation, jquery form pluging.
/*validate contact form */
$(function() {
    $('#contactForm').validate({
        rules: {
            inputName: {
                required: true,
                minlength: 2
            },
            inputEmail: {
                required: true,
                email: true
            },
            inputMessage: {
                required: true
            }
        },
        messages: {
            inputName: {
                required: "name needed!",
                minlength: "Your name must consist of at least 2 characters"
            },
            inputEmail: {
                required: "email needed!"
            },
            inputMessage: {
                required: "content required!"
            }
        },//submits the data to the php file using ajax request
        submitHandler: function(form) {
            $('#contactForm').ajaxSubmit({

                type:"POST",
                data: $(form).serialize(),
                url:"index2.php",
                success: function() {
                    $("#contactForm").hide(1000);
                    $("#feedback").html("Message sent!").addClass("success");
                    createDymanicButton();
                },
                error: function() {
                    $("#contactForm").hide(1000);
                    $("#feedback").html("There was an error, please try again later").addClass("failure");

                    createDymanicButton();
                }
            });
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script src="//oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<a href="#myModal" target=_self role="button" class="btn btn-large btn-info" data-toggle="modal">form</a>
<div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>

            <h4 class="modal-title">title</h4>
          </div>
          <!-- end modal-header -->
          <div class="modal-body">
            <p>contact form</p>
            <hr>
            <!-- **************** the Form starts here *********-->
            <form class="form-horizontal" role="form" id="contactForm" name="contactForm" method="post">

              <div class="form-group">
                <label class="col-lg-2 control-label" for="inputName">Name</label>
                <div class="col-lg-10">
                  <input class="form-control" id="inputName" name="inputName" placeholder="Your name" type="text" value="" required>
                </div>
              </div>

              <div class="form-group">
                <label class="col-lg-2 control-label" for="inputEmail">Email</label>
                <div class="col-lg-10">
                  <input class="form-control" id="inputEmail" name="inputEmail" placeholder="[email protected]" type="email" value="" required>

                </div>
              </div>

              <div class="form-group">
                <label class="col-lg-2 control-label" for="inputMessage">Message</label>
                <div class="col-lg-10">
                  <textarea class="form-control" id="inputMessage" name="inputMessage" placeholder="Message" rows="3" required></textarea>
                  <button class="btn btn-success pull-right" type="submit" name="submit" id="submit">Send</button>
                  <button class="btn btn-default pull-left" data-dismiss="modal" type="button">Cancel</button>
                </div>
              </div>
            </form>

          </div>
          <!-- end modal-body -->
          <div class="modal-footer">
            <!--the footer that will include some feedback-->
            <div id="feedback"></div>
          </div>
          <!-- end of modal footer -->
        </div>
        <!-- end modal-content -->
      </div>
      <!-- end modal-dialog -->
    </div>
    <!-- end myModal -->

The form, which requires the validation is located inside home.html file. I tried placing the custom JS file and the jQuery in the beginning of the home.html, but no matter what I try the browser is the only thing that is validating my form.

Please advise


I created a bridge between AngularJS and the jQuery Validation Plugin. It validates a form using a single directive ng-validate, which automatically detects when the DOM is ready.

Give it a try: https://github.com/jpkleemans/angular-validate. Feedback is highly appreciated!