A personal task has been to redo my website in the hopes of taking a leap of faith in searching for more freelance gigs. I currently work with a consulting firm… however it is a necessity for me to have other means of income for those times when things are slow on that end.
Not a trained designer - I do have an eye for great design and every now and again work on throwing a page together here and there and learn something in the process which is even more important to me - I’ve put the pedal to the metal or well in this case brought the mouse to photoshop (smile), mocked up a simple design and coding is under way.
Now, coding my contact page is a task that takes longer than I care to admit - partly due to procrastination. It needs some form of validation - both client side and back end validation. Here is where JS comes in [client side that is]. Years ago I remember using some JQuery which was pretty comprehensive - unfortunately I could not find that code anywhere on this machine and realized it’s probably trapped on the now broken unit sitting on my bed in earnest need of repair if at all possible - it suffers from electrical problems… anyway, I diverge.
Luckily, determination came to my aide. After endless googling and clicking thru the JQuery API’s I finally located the bit of code I longed for, the JQuery validation plugin.
So here’s an example of a simple form (HTML):
<input type=”text” name=”fullname” id=”fullname” required=”required” />
<input type=”email” name=”email” id=”email” required=”required”/>
<input type=”submit” value=”Submit” />
And now here is the JQuery code needed for validation:
email: true }
} // end rules
}); // end function
Now if you want to add your own custom validation error message for each field, you need to add the following bit of code (italized below) after the closing brace for rules, like so:
}, // make sure you put a comma after the closing bracket for rules
fullname: “Error message for full name”,
required: “This is a required field”,
email: “You must enter a valid email address”
And there you have it. Hopefully you’ll be able to find this helpful!