Question

I’m trying to make a simple Form Validation so the Form shows errors

This is my code:

function postregform(frm) {

 var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;   

  if (frm.name.value='') { 
     $('#error-container2').animate({'top' : '-70px'}, 100);   
       $('#error-container3').animate({'top' : '-70px'}, 100);
        $('#error-container4').animate({'top' : '-70px'}, 100);
        $('#error-container5').animate({'top' : '-70px'}, 100);
        $('#error-container6').animate({'top' : '-70px'}, 100);
    $('#error-container7').animate({'top' : '-70px'}, 100);
   $('#error-container').delay.(200).animate({'top' : '4px'}, 400);
      $('#error-container').delay(3700).animate({'top' : '-70px'}, 400);
   return false; 
  }
  if (frm.email.value=='') { 
    $('#error-container').animate({'top' : '-70px'}, 100);   
       $('#error-container3').animate({'top' : '-70px'}, 100);
        $('#error-container4').animate({'top' : '-70px'}, 100);
        $('#error-container5').animate({'top' : '-70px'}, 100);
        $('#error-container6').animate({'top' : '-70px'}, 100);
    $('#error-container7').animate({'top' : '-70px'}, 100);
    $('#error-container2').delay(200).animate({'top' : '4px'}, 400);
      $('#error-container2').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;

                            }
   if (! emailPattern.test(frm.email.value)) { 
    $('#error-container').animate({'top' : '-70px'}, 100);   
       $('#error-container2').animate({'top' : '-70px'}, 100);
        $('#error-container4').animate({'top' : '-70px'}, 100);
        $('#error-container5').animate({'top' : '-70px'}, 100);
        $('#error-container6').animate({'top' : '-70px'}, 100);
    $('#error-container7').animate({'top' : '-70px'}, 100); 
     $('#error-container3').delay(200).animate({'top' : '4px'}, 400);
      $('#error-container3').delay(3700).animate({'top' : '-70px'}, 400);                    
     return false;
                                               }
       if (frm.textarea.value=='') { 
         $('#error-container').animate({'top' : '-70px'}, 100);   
       $('#error-container3').animate({'top' : '-70px'}, 100);
        $('#error-container2').animate({'top' : '-70px'}, 100);
        $('#error-container5').animate({'top' : '-70px'}, 100);
        $('#error-container6').animate({'top' : '-70px'}, 100);
    $('#error-container7').animate({'top' : '-70px'}, 100);
         $('#error-container4')delay(200).animate({'top' : '4px'}, 400);
      $('#error-container4').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
                           }
        if (frm.textarea.value.length < 10) { 
          $('#error-container').animate({'top' : '-70px'}, 100);   
       $('#error-container3').animate({'top' : '-70px'}, 100);
        $('#error-container4').animate({'top' : '-70px'}, 100);
        $('#error-container2').animate({'top' : '-70px'}, 100);
        $('#error-container6').animate({'top' : '-70px'}, 100);
    $('#error-container7').animate({'top' : '-70px'}, 100);
         $('#error-container5').animate({'top' : '4px'}, 400);
      $('#error-container5').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
                          }
       if (frm.textarea1.value.length < 10) { 
         $('#error-container').animate({'top' : '-70px'}, 100);   
       $('#error-container3').animate({'top' : '-70px'}, 100);
        $('#error-container4').animate({'top' : '-70px'}, 100);
        $('#error-container5').animate({'top' : '-70px'}, 100);
        $('#error-container2').animate({'top' : '-70px'}, 100);
    $('#error-container7').animate({'top' : '-70px'}, 100);
         $('#error-container6').delay(200).animate({'top' : '4px'}, 400);
      $('#error-container6').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
                           }
       if (frm.tooln.value.length < 10) { 
        $('#error-container').animate({'top' : '-70px'}, 100);   
       $('#error-container3').animate({'top' : '-70px'}, 100);
        $('#error-container4').animate({'top' : '-70px'}, 100);
        $('#error-container5').animate({'top' : '-70px'}, 100);
        $('#error-container6').animate({'top' : '-70px'}, 100);
    $('#error-container2').animate({'top' : '-70px'}, 100);
         $('#error-container7').delay(200).animate({'top' : '4px'}, 400);
      $('#error-container7').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
                           }
    }

And I got the onSubmit=”return postregform(this)” setup in the form tag and it worked at first but now it is not. Can someone please help me?

Thanks,
Shawn

Answer 1

This might be at least one of the problems if (frm.name.value='') { (hint just one = instead of two ==) but boy I only see noodles when I look at your code 🙂

There has to be a way to make the code look cleaner and more readable 🙂