javascript - $(document).ready中未捕获的引用错误

我正在使用laravel 5.3。我正在尝试使用jquery validate插件来验证表单数据。数据验证之后，我想触发一个Ajax调用。这是我的代码

<!doctype html>
<html>
<head>
    <meta name="_token" content="{!! csrf_token() !!}"/>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-tagging.js"></script>
    <link type="text/css" href="/css/bootstrap-tagging.css" rel="stylesheet">
    <script src="/js/tapered.bundle.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
    <script src="/js/validation.js"></script>
    <script>
        $(document).ready(function() {
            function ajaxCall() {
                console.log("event occured");
                $.ajax({
                    type: "POST",
                    url: '/storeproject',
                    data: { _token: "{{ csrf_token() }}" },
                    success: function( msg ) {
                        console.log(msg);
                    }
                });
            }
        });
    </script>
</head>
<body>
<form role="form" method="POST" action="javascript:ajaxCall()" id="test-form">
    {!! csrf_field() !!}
    <label>Project Name</label>
    <input class="form-control" id="projectName" placeholder="Name" name="projectname" type="text" autofocus="">
    <input type="submit"  id="submit" name="submit" class="btn btn-primary" value="Add">
</form>
</body>
</html>

当我点击添加按钮给我错误

VM681：1未捕获的ReferenceError：未定义ajaxCall
在：1：1

但是，如果我避免使用文档准备功能，它将可以正常工作。问题是什么？

validate.js文件在这里

$(document).ready(function () {
    $("#test-form").validate({
        rules: {
            projectname:{
                required:true
            }
        }
    });
});

最佳答案

$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("#test-form").validate({
     rules: {
      projectname:{
          required:true
      }
    },
    submitHandler: function(form) {
      $.ajax({
            type: "POST",
            url: '/storeproject',
            data: { _token: "{{"+$('#projectName').val()+"}}" },
            success: function( msg ) {
                console.log(msg);
            }
        });
    }
  });
});

<!doctype html>
<html>
<head>
    <meta name="_token" content="{!! csrf_token() !!}"/>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-tagging.js"></script>
    <link type="text/css" href="/css/bootstrap-tagging.css" rel="stylesheet">
    <script src="/js/tapered.bundle.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>

</head>
<body>
<form role="form" method="POST" id="test-form">
    {!! csrf_field() !!}
    <label>Project Name</label>
    <input class="form-control" id="projectName" placeholder="Name" name="projectname" type="text" autofocus="">
    <input type="submit"  id="submit" name="submit" class="btn btn-primary" value="Add">
</form>
</body>
</html>

关于javascript - $(document).ready中未捕获的引用错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42480423/