Question

HY！我做了一个简单的表格并包含了我的js验证文件，但它没有用。我甚至包括了所有必需的脚本和css文件，但是它给出了错误。控制台上的错误是

超出最大调用堆栈大小

我还没有找到任何解决方案！

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>

Answer 1

由于您正在使用formvalidation的bootstrap风格，因此会对您的标记做出某些假设。

如果将表单控件包装在bootstrap类中，它应该可以工作。

此外，您正在重新添加标记中不存在的javascript中的消息字段。

尝试这样的事情：

<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>

表单验证无效

1 个答案: