I am having problems with jQuery validation of a form.
This is my javascript file: test.js.
$(function() {
$('.error').hide();
$(".button").click(function() {
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
});
});
This is my html file.
<html>
<head>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
</head>
<body>
<div id="contact_form">
<form name="contact" action="">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
</form>
</div>
</body>
</html>
I placed these two files together with the jQuery file in the same directory on my server, but the content “This field is required.” is still visible. It seems like hide() function in the test.js doesn’t work. Can anyone point me out where is wrong? Great thanks!
Put your jquery file before your
test.js.