[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

JQuery Not Working

Posted on 2014-08-20
5
Medium Priority
?
200 Views
Last Modified: 2014-08-28
I have a Wordpress Website that I added the following JQuery to.  It stoped working.  I'm not sure why.  What the script does is stops the Form from submitting if certain form fields have not been filled in and gives a message.  At a glance can anyone say why it may have stopped working?  My thoughts are that it is conflicting with something.

<script type="text/javascript">
	 jQuery(function($) {
	 	jQuery.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        "Incorrect format; Please check your input."
);

$.noConflict();
jQuery( document ).ready(function( $ )
		$("#getQuote").validate({
errorElement: 'div',
			rules: {
				bike_value: {
					required: true,
					digits: true
				},
				bike_state: {
					required: true,
					maxlength: 2
				},
				email_value: {
					required: true,
					email: true,
                    regex: "^((\"[\\w\\s-]+\")|([\\w-]+(?:\\.[\\w-]+)*)|(\"[\\w\\s-]+\")([\\w-]+(?:\\.[\\w-]+)*))(@((?:[\\w-]+\\.)*\\w[\\w-]{0,66})\\.([a-zA-Z]{2,6}(?:\\.[a-zA-Z]{2})?)$)|(@\\[?((25[0-5]\\.|2[0-4][0-9]\\.|1[0-9]{2}\\.|[0-9]{1,2}\\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\\]?$)"
                                          
				}
			},

			messages: {

				bike_value: {
					required: "Please enter the bike value"
				},
				bike_state: {
					required: "Please choose your state"
				},
				email_value: {
                     required: "Please enter an email address",
                     email: "Please enter a valid email address",
                     regex: "Please enter this particular format of email address"
                }		
				
			},
			submitHandler: function(form) {
            form.submit();
        	}
        	
        	
		});

	});
</script>

Open in new window

0
Comment
Question by:rgranlund
  • 3
  • 2
5 Comments
 
LVL 8

Expert Comment

by:Ahmed Merghani
ID: 40274298
Try this:
<script type="text/javascript">
	 jQuery(function($) {
		jQuery.validator.addMethod(
			"regex",
			function(value, element, regexp) {
				var re = new RegExp(regexp);
				return this.optional(element) || re.test(value);
			},
			"Incorrect format; Please check your input.");
	});

$.noConflict();
jQuery( document ).ready(function( $ ){
		$("#getQuote").validate({
errorElement: 'div',
			rules: {
				bike_value: {
					required: true,
					digits: true
				},
				bike_state: {
					required: true,
					maxlength: 2
				},
				email_value: {
					required: true,
					email: true,
					regex: "^((\"[\\w\\s-]+\")|([\\w-]+(?:\\.[\\w-]+)*)|(\"[\\w\\s-]+\")([\\w-]+(?:\\.[\\w-]+)*))(@((?:[\\w-]+\\.)*\\w[\\w-]{0,66})\\.([a-zA-Z]{2,6}(?:\\.[a-zA-Z]{2})?)$)|(@\\[?((25[0-5]\\.|2[0-4][0-9]\\.|1[0-9]{2}\\.|[0-9]{1,2}\\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\\]?$)"

				}
			},

			messages: {

				bike_value: {
					required: "Please enter the bike value"
				},
				bike_state: {
					required: "Please choose your state"
				},
				email_value: {
					 required: "Please enter an email address",
					 email: "Please enter a valid email address",
					 regex: "Please enter this particular format of email address"
				}		

			},
			submitHandler: function(form) {
			form.submit();
			}


		});

	});
</script>

Open in new window

0
 
LVL 7

Author Comment

by:rgranlund
ID: 40274403
@FishBoy. It cleared up the FireBug Error but it does not actually validate the three inputs, email value, state.  Any suggestions?
0
 
LVL 8

Expert Comment

by:Ahmed Merghani
ID: 40274729
Can you post the html form?
0
 
LVL 7

Author Comment

by:rgranlund
ID: 40274823
<form id="getQuote" action=" <?php echo $url; ?>/product/bike-insurance/" method="POST">
	<div class="quote-title-cont">
		<span class="quote-title">Get a QUICK QUOTE</span>
	</div>
	<div style="clear"></div>
	<div class="bike-value">
		<input type="text" name="bike_value" id="bike_value" value="<?php if(isset($_POST['bike_value'])) {echo $_POST['bike_value'];} else {echo 'Bike Value';} ?>" onfocus="this.value='';" />
	</div>

	<div style="clear"></div>
	<div class="bike-state">
		<select name="bike_state">
			<div><option value="" style="display:none">Choose State</option></div>
	
			<?php
	// EXECUTE QUERY
			try {
    			$state->execute();
				$result = $state->fetchAll();
		
				foreach ($result as $row) {
    			$id = $row->id;
				$st = $row->state;
    			echo '<option name="bike_state" class="option-center" id="bike_state" value="'.$id.'">'.$st.'</option>';
				}
			}	
			catch(PDOException $a) {
   				echo 'ERROR: ' . $a->getMessage();
			}
			?>
		</select>
	</div>
	
	<div class="email-value">
		<input type="text" name="email_value" id="email_value" value="<?php if(isset($_POST['email_value'])) {echo $_POST['email_value'];} else {echo 'Email Address';} ?>" onfocus="this.value='';" />
	</div>
	
	<div style="clear"></div>
	<div class="quote-submit">
		<input class="submit" type="submit" name="submit" id="submit" value="See My Quote" />
		<input type="hidden" name="get_quote" value="TRUE" />
	</div>
</form>

Open in new window

0
 
LVL 8

Accepted Solution

by:
Ahmed Merghani earned 2000 total points
ID: 40275580
It works for me but I have 2 comments on your code:
First, It give me wrong error msg in email field which means you need to revise your code.
Secondly, The bike_state filed options use the same "id" attribute which is incorrect instead use the class. See this link for more info:
http://www.tizag.com/cssT/cssid.php
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month18 days, 8 hours left to enroll

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question