Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery Validation not validating

    So here is a JSFiddle of my example that doesn't seem to be working:

    Edit fiddle - JSFiddle

    It's very basic, but I can't even get the validation to fire.

    Here is how my form looks:

    Code:
    <form action="<?php echo $_SERVER['SCRIPT_NAME'] ?>" method="post" id="entry-form" data-error-container="#errors">
    	<fieldset>
    		<legend>About You</legend>
    		<div class="row">
    			<div class="col-sm-6">
    				<label for="first_name">First Name</label>
    				<input type="text" name="first_name" id="first_name" maxlength="75" />
    			</div>
    			<div class="col-sm-6">
    				<label for="last_name">Last Name</label>
    				<input type="text" name="last_name" id="last_name" maxlength="75" />
    			</div>
    		</div>
    		<div class="row">
    			<div class="col-sm-6">
    				<label for="email">Email</label>
    				<input type="text" name="email" id="email" maxlength="75" />
    			</div>
    			<div class="col-sm-6">
    				<label for="email_confirmation">Confirm Email</label>
    				<input type="text" name="email" id="email_confirmation" maxlength="75" />
    			</div>
    		</div>
    	</fieldset>
    
    	<fieldset>
    		<legend>About Your Company</legend>
    		<div class="row">
    			<div class="col-sm-6">
    				<label for="company">Company</label>
    				<input type="text" name="company" id="company" maxlength="75" />
    			</div>
    		</div>
    		<div class="row">
    			<div class="col-sm-6">
    				<label for="title">Title</label>
    				<input type="text" name="title" id="title" maxlength="50" />
    			</div>
    		</div>
    		<div class="row">
    			<div class="col-sm-6">
    				<label for="city">City</label>
    				<input type="text" name="city" id="state" maxlength="75" />
    			</div>
    			<div class="col-sm-2">
    				<label for="state">City</label>
    				<select name="state" id="state">
    					<option value="AL">AL</option>
    				</select>
    			</div>
    			<div class="col-sm-4">
    				<label for="zip">Zip Code</label>
    				<input type="text" name="zip" id="zip" maxlength="7" />
    			</div>
    		</div>
    		<div class="row">
    			<div class="col-sm-6">
    				<label for="phone">Phone Number</label>
    				<input type="text" name="phone" id="phone" maxlength="11" placeholder="xxxxxxxxxx" />
    			</div>
    		</div>
    	</fieldset>
    
    	<div id="errors"></div>
    
    	<div class="btn-wrap">
    		<button type="submit" id="submit">Get My Hot Passes</button>
    		<hr />
    	</div>
    </form>
    And here is my jQuery code:

    Code:
    jQuery( document ).ready(function( $ ) {
    
    	$('#entry-form').validate({
    		wrapper: "li",
    		errorContainer: $(this).attr('data-error-container'),
    		errorLabelContainer: "ul"
    	});
    
    	$('#submit').click(function(e) {
    
    		// Prevent form from submitting
    		e.preventDefault();
    
    
    	});
    
    });
    Thanks for any help. It still doesn't work when I get rid of the submit preventDefault part (this is for future code I'm going to add.. ajax). Does anyone see what I'm doing wrong?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,679
    Thanks
    25
    Thanked 654 Times in 653 Posts
    In order to use jquery you have to load it into your browser.
    And if your using a plug in that also must be loaded.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    In order to use jquery you have to load it into your browser.
    And if your using a plug in that also must be loaded.
    Uh.. I know this. Did you even look at my JSFiddle? I'm loading jQuery and the library I'm using..

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,679
    Thanks
    25
    Thanked 654 Times in 653 Posts
    So why isn't in the code you pasted here?
    Your fiddle show NO LIBRARY just js.
    So your not using a plug in?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure if you're familiar with JSFiddle, but reference the sidebar under "External Resources"... that shows the two javascript files I'm using (jQuery and jQuery Validation)

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,679
    Thanks
    25
    Thanked 654 Times in 653 Posts
    No I don't use JSFiddle and if you hadn't of included code and just said look at my JSFiddle I wouldn't have looked twice and would have moved along. But you included code and I garbed it and ran it through my server.

    The documentation for jquery-validation shows two things.
    The JS:
    <script>
    $("#entry-form").validate();
    </script>

    and the required attribute
    like: <input type="text" name="first_name" id="first_name" maxlength="75" required/>

    May need other things to define password input, etc..
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •