CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
bc110402307 Syed Zeeshan Haide
bc110402307 Syed Zeeshan Haide

Reputation: 454

Form Validation not working

Hy! I made a simple form and included my js validation file but it's not working. I even included all the required scripts and css files but it's giving error. The error on console is

Maximum call stack size exceeded

I did not find any solution yet!

form_validation.js

$(document).ready(function() {


    $('#contactForm')
        .formValidation({
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {

                    validators: {
                        notEmpty: {
                            message: 'The first name is required'
                        },
                    regexp: {
                      message: 'Name only contains Letter',
                      regexp: /^[A-Za-z]*$/
                    }

                    }
                },
                message: {
                    validators: {
                        notEmpty: {
                            message: 'The message is required'
                        },
                    }
                }

            }
        })

});

testForm.php

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/ecmascript"></script>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


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

<script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>

<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<script src="js/form_validation.js"></script>

    </head>
    <body>
        <form method="post" id="contactForm" >
        <label>Name</label>
        <input type="text" name="name"/>
        <input type="submit" value="process"/>
    </form>

    </body>
</html>

Upvotes: 0

Views: 557

Answers (1)

Robban
Robban

Reputation: 6802

Since you're using the bootstrap flavour of formvalidation it makes certain assumptions about your mark up.

If you wrap your form controls in the bootstrap classes it should work.

Also, you're refencing a message field in your javascript which is not present in your markup.

Try something like this:

<form method="post" id="contactForm" >

   <div class="form-group">
      <label for="name">Name</label>
      <input class="form-control" type="text" name="name" id="name"/>
   <div>

   <div class="form-group">
      <label for="message">Message</label>
      <input class="form-control" type="text" name="message" id="message"/>
    </div>

    <input class="btn btn-default" type="submit" value="process"/>

</form>

Upvotes: 1

Related Questions