I have html with js in one file. I want had two different files js, and html.
This is all in one file (first case), and this code work :
<html>
<head>
<title>menu</title>
<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
</head>
<body>
<div class="container">
<h2>Registration</h2>
<form id="commentForm" method="post" action="Servlet" name="add_data">
<label for="username">First Name</label>
<input type="text" name="username" id="username" />
<button type="submit">Register</button>
</form>
<script type="text/javascript">
$(function() {
// Initialize form validation on the registration form.
// It has the name attribute "registration"
$("form[name='add_data']").validate({
// Specify validation rules
rules: {
username: {
required: true,
minlength: 5
}
},
messages: {
username: "Please enter your firstname"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</div>
</body>
</html>
But when I create second file valid.js and move all JavaScript code, this is don't work (second case):
<html>
<head>
<title>Меню</title>
<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<script src="valid.js"></script>
</head>
<body>
<div class="container">
<h2>Registration</h2>
<form id="commentForm" method="post" action="Servlet" name="add_data">
<label for="username">First Name</label>
<input type="text" name="username" id="username" />
<button type="submit">Register</button>
</form>
</div>
</body>
</html>
And file valid.js which exist in same folder with html file. This is copy of code in <script> block in first example.
$(function() {
$("form[name='add_data']").validate({
rules: {
username: {
required: true,
minlength: 5
}
},
messages: {
username: "Please enter your firstname"
},
submitHandler: function(form) {
form.submit();
}
});
});
HTML and JS files in same directory. May be I need call in html my js code?
There my mistake? Why second case don't work? How to fix this issue?
