javascript - How can I clear individual validation errors? -

javascript - How can I clear individual validation errors? -

i have alert box pop above subscribe form, indicates each specific input error in form.

i wanted know how errors clear, 1 1 on keyup, if input fields validated form's specifications? example, user comes , hits send , nil filled out; there list of errors. if then, user decides come in name, not email address, alert box should clear text, "please come in first name", other errors haven't been corrected should remain.

i tried creating function around <p> tag within error field, wasn't sure how around valid variable within script.

here code have:

and jsfiddle http://jsfiddle.net/cqf8guys/2/

thanks

$(document).ready(function() { $('form #response2').hide(); $('.button2').click(function(e) { e.preventdefault(); var valid = ''; var required = ' required'; var first = $('form #first').val(); var lastly = $('form #last').val(); var city = $('form #city').val(); var email = $('form #email').val(); var tempt = $('form #tempt').val(); var tempt2 = $('form #tempt2').val(); if(first=='' || first.length<=1) { $('form #first').css('border','2px solid #ff0000'); $('form #first').css('background-color','#ffcece'); valid += '<p>your first name required</p>'; } else { $(this).removeattr('style'); } if(last=='' || last.length<=1) { $('form #last').css('border','2px solid #ff0000'); $('form #last').css('background-color','#ffcece'); valid += '<p>your lastly name' + required + '</p>'; } else { $(this).removeattr('style'); } if(city=='' || city.length<=1) { $('form #city').css('border','2px solid #ff0000'); $('form #city').css('background-color','#ffcece'); valid += '<p>please include city</p>'; } else { $(this).removeattr('style'); } if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) { valid += '<p>a valid e-mail address required</p>'; } if (tempt != 'http://') { valid += '<p>we can\'t allow spam bots.</p>'; } if (tempt2 != '') { valid += '<p>a human user' + required + '</p>'; } if (valid != '') { $('form #response2').removeclass().addclass('error2') .html('' +valid).fadein('fast'); } else { $('form #response2').removeclass().addclass('processing2').html('<p style="top:0px; left:0px; text-align:center; line-height:1.5em;">please wait while process information...</p>').fadein('fast'); var formdata = $('form').serialize(); submitformsubscribe(formdata); } }); }); function submitformsubscribe(formdata) { $.ajax({ type: 'post', url: 'http://3elementsreview.com/blog/wp-content/themes/3elements/php-signup/sign-up-complete.php', data: formdata, datatype: 'json', cache: false, timeout: 4000, success: function(data) { $('form #response2').removeclass().addclass((data.error === true) ? 'error2' : 'success2') .html(data.msg).fadein('fast'); if ($('form #response2').hasclass('success2')) { settimeout("$('form #response2').fadeout('fast')", 6000); } }, error: function(xmlhttprequest, textstatus, errorthrown) { $('form #response2').removeclass().addclass('error2') .html('<p>there <strong>' + errorthrown + '</strong> error due <strong>' + textstatus + '</strong> condition.</p>').fadein('fast'); }, complete: function(xmlhttprequest, status) { $('form')[0].reset(); } }); };

html code

<header class="main-hd"> <h1 class="page-headline">join 3elements review's email list</h1> </header> <section> <form class="contact-me" action="php-signup/sign-up-complete.php" method="post" name="contact-me"> <div id="response2"><!-----------------contains form error message--------------></div> <input id="first" class='txt1' title="your first name required" maxlength="15" name="first" pattern="[a-za-z]{2,15}" type="text" autofocus="" placeholder="first name" /> <input id="last" class='txt1' title="your lastly name required" maxlength="15" name="last" pattern="[a-za-z]{2,15}" type="text" placeholder="last name" /> <input id="email" class='txt1' title="your e-mail address required" maxlength="50" name="email" pattern="[a-za-z0-9\@\.com]{7,50}" type="email" placeholder="e-mail address" /> <input id="city" class='txt1' title="please fill in 'city'" maxlength="40" name="city" pattern="[a-za-z\s]{3,40}" type="text" placeholder="city" /> <select id="country" name="country"> <option value="">country</option> <option value="united states">united states</option> <option value="united kingdom">united kingdom</option> <option value="australia">australia</option> <option value="brazil">brazil</option> <option value="canada">canada</option> <option value="egypt">egypt</option> <option value="france">france</option> <option value="india">india</option> <option value="indonesia">indonesia</option> <option value="italy">italy</option> <option value="mexico">mexico</option> <option value="new zealand">new zealand</option> <option value="saudi arabia">saudi arabia</option> <option value="south africa">south africa</option> <option value="spain">spain</option> </select> <div id="ajaxloader" style="display: none;"> <img src="images/loader.gif" alt="loading..." /></div> <div id="cityajax" style="display: none;"> <select id="state" name="state"> <option value="">-state/region-</option> </select> </div> <input id="tempt" name="tempt" type="hidden" value="http://" /> <input id="tempt2" class="clear" name="tempt2" type="hidden" value="" /> <button class="txt1 button2">subscribe</button> </form> </section>

jquery code

$(document).ready(function() { $('form #response2').hide(); $('.txt1').on('keyup click', function(e) { e.preventdefault(); var valid = ''; var required = ' required'; var first = $('form #first').val(); var lastly = $('form #last').val(); var city = $('form #city').val(); var email = $('form #email').val(); var tempt = $('form #tempt').val(); var tempt2 = $('form #tempt2').val(); if(first=='' || first.length<=1) { $('form #first').css('border','2px solid #ff0000'); $('form #first').css('background-color','#ffcece'); valid += '<p>your first name required</p>'; } else { $('form #first').removeattr('style'); } if(last=='' || last.length<=1) { $('form #last').css('border','2px solid #ff0000'); $('form #last').css('background-color','#ffcece'); valid += '<p>your lastly name' + required + '</p>'; } else { $(this).removeattr('style'); } if(city=='' || city.length<=1) { $('form #city').css('border','2px solid #ff0000'); $('form #city').css('background-color','#ffcece'); valid += '<p>please include city</p>'; } else { $('form #city').removeattr('style'); } if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) { valid += '<p>a valid e-mail address required</p>'; } if (tempt != 'http://') { valid += '<p>we can\'t allow spam bots.</p>'; } if (tempt2 != '') { valid += '<p>a human user' + required + '</p>'; } if (valid != '') { $('form #response2').removeclass().addclass('error2') .html('' +valid).fadein('fast'); }else { if($('.button2').data('clicked')){ $('form #response2').removeclass().addclass('processing2').html('<p style="top:0px; left:0px; text-align:center; line-height:1.5em;">please wait while process information...</p>').fadein('fast'); var formdata = $('form').serialize(); submitformsubscribe(formdata); } } }); }); function submitformsubscribe(formdata) { $.ajax({ type: 'post', url: 'http://3elementsreview.com/blog/wp-content/themes/3elements/php-signup/sign-up-complete.php', data: formdata, datatype: 'json', cache: false, timeout: 4000, success: function(data) { $('form #response2').removeclass().addclass((data.error === true) ? 'error2' : 'success2') .html(data.msg).fadein('fast'); if ($('form #response2').hasclass('success2')) { settimeout("$('form #response2').fadeout('fast')", 6000); } }, error: function(xmlhttprequest, textstatus, errorthrown) { $('form #response2').removeclass().addclass('error2') .html('<p>there <strong>' + errorthrown + '</strong> error due <strong>' + textstatus + '</strong> condition.</p>').fadein('fast'); }, complete: function(xmlhttprequest, status) { $('form')[0].reset(); } }); };

this should work!

look @ jsfiddle

javascript