Question

我正在建立一个laravel项目，我想用jquery验证来验证我的表单，因为我使用bootstrap模式为我的表单，所以我认为这比重构视图更容易。但它没有找到Validate方法

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Parduotuvė</title>

{{--jquery--}}
<script
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<!-- Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.js"></script>

<!-- Custom styles for this template -->
<link href="/css/app.css" rel="stylesheet">


<script type="text/javascript" src="/js/myscripts.js"></script>

感觉像我不包括验证脚本，不知道为什么......

P.S。我也尝试使用不同的jquery版本3.1.1或1.11.1，正如https://jqueryvalidation.org/中提到的那样，它是用这些版本测试的。

编辑。我的脚本代码

$(document).ready(function() {
$('#create_order').formValidation({
        framework: 'bootstrap',
        err: {
            container: '#errors'
        },
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            full_name: {
                validators: {
                    notEmpty: {
                        message: 'Šis laukas yra būtinas'
                    },
                    stringLength: {
                        min: 6,
                        max: 40,
                        message: 'Įveskite savo pilną vardą'
                    },
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'Šis laukas būtinas'
                    },
                    emailAddress: {
                        message: 'Blogai įvestas el. paštas'
                    }
                }
            },
            number: {
                validators: {
                    notEmpty: {
                        message: 'Šis laukas būtinas'
                    },

                }
            },
        }
    })
    .on('err.form.fv', function(e) {
        // Show the message modal
        $('#messageModal').modal('show');
    });
});

Answer 1

浏览器将诸如.css，.js等文件保存在缓存中以改善重新加载时间。因此，如果您已经打开过一次网站，更新了JavaScript文件，那么您的浏览器还没有下载您的功能。

检查源下的开发工具选项卡，确认文件已更新。

如果没有，你有几个可能性：

使用其他浏览器打开
在隐身窗口中打开
手动删除缓存

Answer 2

使用jQuery validate Plugin

检查下面的表格验证示例

＆＃13;

$( "form" ).validate({
    messages: {
        name: "Name is required.",
        email: {
            required: "Email is required.",
            email: "You must provide a valid email address."
        }
    },
    focusInvalid: false,
    submitHandler: function() {
        alert( "Successful submission" );         
    }
});

＆＃13;

* { box-sizing: border-box; }
body {
    font-size: 1.2em;
}
body input, body button {
    font-size: 1.2em;
}

form > div {
    margin: 1em;
}
form button {
    width: 100%;
}
label { display: block; }
input {
    width: 100%;
    padding: 0.2em;
}
button {
    padding: 0.2em;
}

input.error {
    background: red;
    color: white;
}
label.error {
    color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<form>
    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" required>
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" required>
    </div>
    <div>
        <button>Submit</button>
    </div>
</form>

＆＃13;

包括： - <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

Answer 3

您正在混合2个JQuery验证插件。

您已将JS引用包含在Jörn的库https://jqueryvalidation.org/中，这是最受欢迎且最知名的插件（请查看源代码，其中包含URL和开发人员的名称）：

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

但是您的Javascript代码使用的是完全http://formvalidation.io/完全不同的验证插件所使用的语法，这是我没有听说过的。 Jörn的库中没有使用formValidation，framework等，但似乎在其中使用according to the docs。

Jquery验证方法未找到laravel

3 个答案:

使用jQuery validate Plugin