this fragment of validation code on onsubmit event:
/** * ensure user name provided: */ if (user_name.val() === '') { // display error on name element user_name.parent().addclass('error'); user_name.parent().find('.error_msg').html('name required.'); error = true; } else { // reset error state user_name.parent().removeclass('error'); user_name.parent().find('.error_msg').empty(); } /** * ensure user email provided: */ if (user_email.val() === '') { // display error on email element user_email.parent().addclass('error'); user_email.parent().find('.error_msg').html('email required.'); } else { // reset error state user_email.parent().removeclass('error'); user_email.parent().find('.error_msg').empty(); } /** * ensure message subject provided */ if (message_subject.val() === '') { // display error on subject element message_subject.parent().addclass('error'); message_subject.parent().find('.error_msg').html('message subject required.'); } else { message_subject.parent().removeclass('error'); message_subject.parent().find('.error_msg').empty(); } /** * ensure message body provided */ if (message_body.val() === '') { // display error on message body element message_body.parent().addclass('error'); message_body.parent().find('.error_msg').html('a message required.'); } else { message_body.parent().removeclass('error'); message_body.parent().find('.error_msg').empty(); } as can see, lots of repeated if/else blocks simple logic.
what way optimize code reduce overall size while still accomplishing same behaviors?
i let css of work.
put error messages within html this:
<div> <input id="user_name" type="text"> <span class="error_msg">name required.</span> </div> make them hidden default, visible if parent has error class:
.error_msg { display: none; } div.error .error_msg { display: inline; } your code reduces this:
$('input, textarea').change(function() { $(this).parent('div').toggleclass('error', !$(this).val()); }).change(); 