Form Validation Without using Plugin - Problem

Question

I really don't wanna use a Plugin to validate my form but for some reason it is not working:

My JS is:

function postregform() {
 var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;   
  var name = $('#name').val();var email = $('#email').val();var text = $('#textarea').val(); var text2 = $('#textarea2').val();var tooln = $('#tools').val();
if (name.value=='') { 
   $('#error-container').delay.(200).animate({'top' : '4px'}, 400)
      $('#error-container').delay(3700).animate({'top' : '-70px'}, 400);
   return false; 
  }
if (email.value=='') { 
    $('#error-container2').delay(200).animate({'top' : '4px'}, 400);
      $('#error-container2').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
     }
   if (! emailPattern.test(email.value)) { 
   $('#error-container3').delay(200).animate({'top' : '4px'}, 400);
      $('#error-container3').delay(3700).animate({'top' : '-70px'}, 400);                    
     return false;                   
   }
       if (text.value=='') { 
         $('#error-container4')delay(200).animate({'top' : '4px'}, 400);
      $('#error-container4').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
                           }
        if (text.value.length < 10) { 
         $('#error-container5').animate({'top' : '4px'}, 400);
      $('#error-container5').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
                          }
       if (text2.value.length < 10) { 
         $('#error-container6').delay(200).animate({'top' : '4px'}, 400);
      $('#error-container6').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
                           }
       if (tooln.value.length < 10) { 
         $('#error-container7').delay(200).animate({'top' : '4px'}, 400);
      $('#error-container7').delay(3700).animate({'top' : '-70px'}, 400);           
    return false;
    }
}

My HTML forms:

<div id="bug_form">
<form method="post" action="http://forms.yola.com/formservice/en_US/8a4986cb2437dfa701243c302c29582d/8a4986ca315350c601315d9a956b19db/8a4986ca315350c601315d9a95b919dc/I35/" onSubmit="return postregform();"> 

  <label for="yola_form_widget_I35_0"><span style="color:red;">*</span> Name</label>  <br>

                                    <input id="yola_form_widget_I35_0" class="text" id="name" name="name" type="text" value=""> 
                        <!--name="0&lt;text&gt;"-->
                <input type="hidden" name="0&lt;label&gt;" value="Name"> 

                    <br><br>
                                                          <label for="yola_form_widget_I35_1"><span style="color:red;">*</span> Email</label>  <br>

                                    <input id="yola_form_widget_I35_1" class="text" id="email" name="email" type="text" value=""> 

                <input type="hidden" name="1&lt;label&gt;" value="Email"> 

                    <br><br>
                                                      <label for="yola_form_widget_I35_2"><span style="color:red;">*</span> Tool with Bug</label>  
                        <br>                    
                                    <select id="yola_form_widget_I35_2" name="2&lt;list&gt;"> 
                                                    <option value="Script Encode">Script Encoder</option> 
                                                    <option value="Color Picker">Color Picker</option> 
                                                    <option value="Linear">Linear</option> 
                                                    <option value="Text Properties">Text Properties</option> 
                                                    <option value="Box Properties">Box Properties</option> 
                                                    <option value="Transform Properties">Transform Properties</option> 
                                                    <option value="Position Changer">Position Changer</option> 
                                                    <option value="Code Previewer">Code Previewer</option> 
                                            </select> 

                <input type="hidden" name="2&lt;label&gt;" value="Tool with Bug"> 

                    <br><br>
                                                          <label for="yola_form_widget_I35_3"><span style="color:red;">*</span> Bug Description</label><br>  

                                    <textarea id="yola_form_widget_I35_3" cols="18" rows="8" id="textarea" name="textarea"></textarea> 

                <input type="hidden" name="3&lt;label&gt;" value="Bug Description"> 


            <input type="hidden" name="redirect" value="?formI35Posted=true"> 
            <input type="hidden" name="redirect_fail" value="?formI35PostFailed=true"> 
            <input type="hidden" name="form_name" value="Report Bug"> 
            <input type="hidden" name="site_name" value="YolaTools"> 
                        <input type="hidden" name="destination" value="49FVJQi6Aiw6w5NTMAH7HuUGK-JH4UzV6JUV6gTwCHYgMQ==:d19AMmhdrSbCjBPC3ewkoW7pAqRJ0REkf9OJAJQrqlM="> 

                            <p><input class="submit" type="submit" value="Submit" onSubmit="return postregform();"></p> 


    </form>
  <span style="cursor:pointer;" onclick="bugg_out();">Close[X]</span>
</div>

<div id="request">

    <form method="post" action="http://forms.yola.com/formservice/en_US/8a4986cb2437dfa701243c302c29582d/8a4986ca315350c601315d9a956b19db/8a4986ca315350c601315d9a95b919dc/I39/" onSubmit="return postregform(this);"> 



                                                       <label for="yola_form_widget_I39_0"><span style="color:red;">*</span> Name</label> <br>

                                    <input id="yola_form_widget_I39_0" class="text" name="name" type="text" value=""> 

                <input type="hidden" name="0&lt;label&gt;" value="Name"> 
        <br><br>
                    <label for="yola_form_widget_I39_1"><span style="color:red;">*</span> Email</label>
               <br>                             
                                    <input id="yola_form_widget_I39_1" class="text" name="email" type="text" value=""> 

                <input type="hidden" name="1&lt;label&gt;" value="Email"> 


<br>                <br>   
      <label for="yola_form_widget_I39_2"><span style="color:red;">*</span> Tool Name</label>
                   <br>                 <input id="yola_form_widget_I39_2" class="text" id="tools" name="tooln" type="text" value=""> 

                <input type="hidden" name="2&lt;label&gt;" value="Tool Name"> 

                    <br><br>
                                                          <label for="yola_form_widget_I39_3"><span style="color:red;">*</span> Tool Description</label>  
                                            <br>
                                    <textarea id="yola_form_widget_I39_3" cols="18" rows="8" id="textarea2" name="textarea1"></textarea> 

                <input type="hidden" name="3&lt;label&gt;" value="Tool Description"> 


            <input type="hidden" name="redirect" value="?formI39Posted=true"> 
            <input type="hidden" name="redirect_fail" value="?formI39PostFailed=true"> 
            <input type="hidden" name="form_name" value=""> 
            <input type="hidden" name="site_name" value="YolaTools"> 
                        <input type="hidden" name="destination" value="rcUO3XKWbMU_mNgysHPcPO_RNeKhSrMC9HNguOCTusNvKg==:d19AMmhdrSbCjBPC3ewkoW7pAqRJ0REkf9OJAJQrqlM="> 

                            <p><input class="submit" type="submit" value="Submit"></p> 


    </form> 
  <span style="cursor:pointer;text-align:center;" onclick="reque_out();">Close[X]</span>
</div>

And the Errors:

<!-- Start Errors -->
<div id="error-container">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Name is Required</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 

<div id="error-container2">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Email is Required</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 

<div id="error-container3">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Invalid Email</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 

<div id="error-container4">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Bug Description is Required</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 

<div id="error-container5">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Min. Lenght for Bug Description is 10</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 

<div id="error-container6">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Min. Lenght for Tool Description is 10</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 

<div id="error-container7">  
 <div class="error-box"> 
   <span id="forgot" style="color:red;font-weight:bold;">Tool Name is Required</span> 
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div> 
</div></div> 
<!-- End Error -->

And not to forget the CSS:

 .top_bottom{
    color:white;
   background: #2580bc; /* Old browsers */
background: -moz-linear-gradient(top, #2580bc 0%, #2989d8 50%, #218fd3 52%, #2b94e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(50%,#2989d8), color-stop(52%,#218fd3), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* W3C */ 
    padding:15px;border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;-o-border-radius:9px;
  }
  .top_bottom:hover{
    color:white;
    background: #2580bc; /* Old browsers */
background: -moz-linear-gradient(top, #2580bc 0%, #0084d1 53%, #0678d6 55%, #2b94e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(53%,#0084d1), color-stop(55%,#0678d6), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* W3C */ 
    padding:15px;border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;-o-border-radius:9px;
  }
  .top_bottom:active{
    color:white;
   background: #2580bc; /* Old browsers */
background: -moz-linear-gradient(top, #2580bc 0%, #2989d8 50%, #218fd3 52%, #2b94e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(50%,#2989d8), color-stop(52%,#218fd3), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* W3C */ 
    padding:15px;border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;-o-border-radius:9px;
  }
   #bug_form, #request {
    position:absolute;
    font-size:15px; 
    top:-530px;
    right:463px; 
    border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
-webkit-border-bottom-left-radius:20px;
-o-border-bottom-left-radius:20px;
   border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
-webkit-border-bottom-right-radius:20px;
-o-border-bottom-right-radius:20px;
    padding:10px;
    z-index:900;color:black;
     background: #2580bc; /* Old browsers */
background: -moz-linear-gradient(top, #2580bc 0%, #2989d8 50%, #218fd3 52%, #2b94e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(50%,#2989d8), color-stop(52%,#218fd3), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* W3C */ 
    padding:15px;
  }
    #error-container, #error-container2, #error-container3,  #error-container4, #error-container5, #error-container6, #error-container7 {position:fixed;top:-70px;right:36px;}
  .error-box {background-color:#FFDBE0;border:2px solid red;font-size:13px;line-height:1.3em;margin:10px auto;padding:10px;position:relative;text-align:center;width:270px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:0 0 5px #888888;-webkit-box-shadow:0 0 5px #888888;box-shadow:0 0 5px #88888;}
  .chat-bubble-arrow-border {border-color:transparent  transparent red transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;top:-21px;right:30px;z-index:1;}
.chat-bubble-arrow {border-color:transparent  transparent #FFDBE0 transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;top:-19px;right:30px;z-index:5;}

This code might seem kinda crazy but I just don't like using Validation Plugins. Please Help

You have several typos in your javascript code. What exactly isn't working? — Dogbert
– Dogbert, Commented Jul 29, 2011 at 7:40

abhijit · Accepted Answer · 2011-07-29 07:51:08Z

the simplest way to validate without using plugin would be to write some validation regex functions and if all the conditions are passed let the process continue...refer this link below: i have just copied the code from this site and posted here just visit the link and customize your validations style. the site:

$(function() {
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!

    var name = $( "#name" ),
        email = $( "#email" ),
        password = $( "#password" ),
        allFields = $( [] ).add( name ).add( email ).add( password ),
        tips = $( ".validateTips" );

    function updateTips( t ) {
        tips
            .text( t )
            .addClass( "ui-state-highlight" );
        setTimeout(function() {
            tips.removeClass( "ui-state-highlight", 1500 );
        }, 500 );
    }

    function checkLength( o, n, min, max ) {
        if ( o.val().length > max || o.val().length < min ) {
            o.addClass( "ui-state-error" );
            updateTips( "Length of " + n + " must be between " +
                min + " and " + max + "." );
            return false;
        } else {
            return true;
        }
    }

    function checkRegexp( o, regexp, n ) {
        if ( !( regexp.test( o.val() ) ) ) {
            o.addClass( "ui-state-error" );
            updateTips( n );
            return false;
        } else {
            return true;
        }
    }

    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Create an account": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );

                bValid = bValid && checkLength( name, "username", 3, 16 );
                bValid = bValid && checkLength( email, "email", 6, 80 );
                bValid = bValid && checkLength( password, "password", 5, 16 );

                bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
                // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]" );
                bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

                if ( bValid ) {
                    $( "#users tbody" ).append( "<tr>" +
                        "<td>" + name.val() + "</td>" + 
                        "<td>" + email.val() + "</td>" + 
                        "<td>" + password.val() + "</td>" +
                    "</tr>" ); 
                    $( this ).dialog( "close" );
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

    $( "#create-user" )
        .button()
        .click(function() {
            $( "#dialog-form" ).dialog( "open" );
        });
});

Collectives™ on Stack Overflow

Form Validation Without using Plugin - Problem

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related