Script itself

<script type="text/javascript"> $(document).ready(function() { $('#valid').text(''); $('#valid2').text(' '); $('#valid3').text(' '); $('#valid4').text(' '); $('#email').blur(function() { if($(this).val() != '') { var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.?([a-z0-9-]+\.)?([[a-z0-9-]+\.)[az]{2,6}$/i; if(pattern.test($(this).val())){ $(this).css({'border' : '1px solid #569b44'}); $('#valid2').text(' '); } else { $(this).css({'border' : '1px solid #ff0000'}); $('#valid2').text('Enter a valid email address to send to'); } } else { $(this).css({'border' : '1px solid #ff0000'}); $('#valid2').text('You forgot to enter the email address to send to'); } }); $('#name').blur(function() { if($(this).val() != '') { var pattern = /^.{1,40}$/i; if(pattern.test($(this).val())){ $(this).css({'border' : '1px solid #569b44'}); $('#valid').text(' '); } else { $(this).css({'border' : '1px solid #ff0000'}); $('#valid').text('Please enter a value less than or equal to 40'); } } else { $(this).css({'border' : '1px solid #ff0000'}); $('#valid').text('You forgot to enter the your name to send to'); } }); $('#subject').blur(function() { if($(this).val() != '') { var pattern = /^.{1,100}$/i; if(pattern.test($(this).val())){ $(this).css({'border' : '1px solid #569b44'}); } else { $(this).css({'border' : '1px solid #ff0000'}); $('#valid3').text('Please enter a value less than or equal to 100'); } } else { $(this).css({'border' : '1px solid #ff0000'}); $('#valid3').text('You forgot to enter the subject to send to'); } }); $('#message').blur(function() { if($(this).val() != '') { var pattern = /^.{1,4096}$/i; if(pattern.test($(this).val())){ $(this).css({'border' : '1px solid #569b44'}); } else { $(this).css({'border' : '1px solid #ff0000'}); $('#valid4').text('Please enter a value less than or equal to 4096'); } } else { $(this).css({'border' : '1px solid #ff0000'}); $('#valid4').text('You forgot to enter the message to send to'); } }); }); </script>

here is the form

 <form id="ajax-contact-form" > <div class="span-25 last" style="height: 60px;"> <div class="span-8 form notopmargin"> <input class="text" type="text" name="name" id="name" value="" placeholder="Name" required /><span id="valid"></span><br /> </div> <div class="span-8 form last notopmargin"> <input class="text" type="text" name="email" id="email" value="" placeholder="E-mail" required /><span id="valid2"></span><br /> </div> </div> <div class="span-17 last notopmargin"> <input class="texts" type="text" name="subject" id="subject" value="" placeholder="Subject" required /><span id="valid3"></span><br /> </div> <div class="span-17 last"> <textarea class="text" name="message" id="message" value="" rows="5" cols="25" placeholder="Message" required ></textarea><span id="valid4"></span><br /> </div> <div class="span-12 notopmargin"> <input class="button" type="submit" name="submit" value="Send message" id="submit_form" required/> </div> </form>

How can I get not to send a letter and pull out an error warning window?

    2 answers 2

    The logic of form validation should be approximately as follows:

     $('form').on('submit', function() { if ($('input.class1').val() == '') { alert('Error'); return false; } else if ($('input.class2').val() == '') { alert('Error'); return false; } else { $(this).submit(); } return false; });

      In the form tag you need to add a handler onsubmit = "validate ()".

      The validate function will detect the presence of errors and, if there are any, then you need to return false, then the sending will not occur.

      You can monitor the presence of errors through a global variable, which will be the flag "there are errors / no errors".

      • Thank you for the answer, of course, and I think it is correct) but can it go deeper? added script $ (document). ready (function () {$ ('form'). validate ();}); put <form id = "ajax-contact-form" onsubmit = "validate ()"> and on submit_from what to throw? - reddyk