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!
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!
Share Improve this question asked Apr 13, 2011 at 12:27 MichaelMichael 2,1877 gold badges33 silver badges49 bronze badges 3-
4
Put the
jquery-1.5.2.min.jsreference above thetest.jsreference, so that it will be recognized. – user447356 Commented Apr 13, 2011 at 12:30 - 1 Works in this jsfiddle. It's hidden on run. – justkt Commented Apr 13, 2011 at 12:30
- 1 Does anyone debug their own code anymore? Any simple error incurs an immediate post to stackoverflow – Calum Commented Apr 13, 2011 at 12:33
1 Answer
Reset to default 9Put your jquery file before your test.js.
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="test.js"></script>