Jump to content

Need to use jQuery to validate form inputs


drayarms

Recommended Posts

As the topic states, I'm trying to validate form inputs using jQuery.    The input field in question is a text field, with id "input_zip".  It is supposed to validate US zip codes.  The success or error message needs to be printed in a div with id "zip_error".  register_error and "register_success" are css classes which represent the style for the message that would be printed in "zip_error" div if the input doesn't and does match respectively.  So here is the code.  Needless saying that it doesn't work and since this is my first attempt to write such code, I'm at a total loss.  I'm not sure if it is the matching pattern that is wrong or if the entire algorithm is wrong.  I used alerts instead of printing out text in "zip_error" div, to no avail.

 

 


	<script type='text/javascript'> //Validate registration inputs


		$(document).ready(function() {


			$("#input_zip").keydown(function(){

				var zip_value = $(this).val();

				var zip_pattern = "^([0-9]{5})$";

				if(!zip_patten.match(zip_value)) { //If the current value doesn't match accepted pattern 

        					$("#zip_error").html("<span class = 'register_error'>Enter a valid zip code</span>");

   					} else {$("#zip_error").html("<span class = 'register_success'>Valid zip</span>"); }


			});   				

		});





	</script>



<!DOCTYPE html>
<html lang='de'>
    <head>
        <meta charset='utf-8' />
        <title>Unknown</title>
    </head>
    <body>
        <input type='text' name='zip_code' value='' />
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
        <script>
            (function ($) {
                $(document).ready(function() {
                    $('input[name="zip_code"]').keydown(function() {
                        var zipValue = $(this).val();
                        var zipPattern = '([0-9]{5})';
                        
                        if(zipValue.match(zipPattern)) {
                            $(this).css({'border':'1px solid #0f0'});
                        } else {
                            $(this).css({'border':'1px solid #f00'});
                        }
                    });
                });
            })(jQuery);
        </script>
    </body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.