Ringo88 Ringo88 - 4 months ago 12
Javascript Question

jquery validation not working - need to include more files?

I am using the jquery validation plugin: https://jqueryvalidation.org/
I've tried different examples but the validation is not working for me. I'm now testing with this extra simple code from this thread (demo down very bottom): jQuery validation on select box not working

Still does not work for me. I've included bootstrap.min.js and jquery.validate.js
The jquery.validate.js package came with a lot of files in its zip. Am I suppose to include other files too? Thanks very much for any feedback / help.

My codes, body part copied from the above example link:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<form id="formid">
<select id="select" name="select" class="required">
<option value="">Choose</option>
<option value="child">test2</option>
</select>

<input type="submit" />
</form>
<script>
$("#formid").validate();
</script>
<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.js"></script>

</body></html>

Answer

You misplaced the jQuery script tag. Please put it in the head tag and make sure it is above your plugins.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<script src="js/jquery.js"></script> //place jquery.js here, followed by plugins

<!-- Bootstrap Core JavaScript --> 

<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.validate.js"></script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<form id="formid">
    <select id="select" name="select" class="required">
        <option value="">Choose</option>
        <option value="child">test2</option>
    </select>

    <input type="submit" />
</form>
<script>
$("#formid").validate(); 
</script> 
<!-- jQuery --> 


</body></html>