1. 홈
  2. 질의 응답
  3. 양식 검증 플러그인을 사용하지 않고 - 문제

양식 검증 플러그인을 사용하지 않고 - 문제

2011-07-29 4 views
1

을 정말 싶어 내 양식을 확인하기 위해 플러그인을 사용하지 않는하지만 어떤 이유로 작동하지 않습니다 :양식 검증 플러그인을 사용하지 않고 - 문제

내 JS는 다음과 같습니다

function postregform() { 
var emailPattern = /^[a-zA-Z0-9._-][email protected][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; 
    } 
}

내 HTML 양식 :

<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>

그리고 오류 :

<!-- 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 -->

그리고되지는 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;}

을하지만 난 그냥 확인 플러그인을 사용하여 좋아하지 않는다. 도와주세요

출처

2011-07-29 Shawn31313

+0

자바 스크립트 코드에는 몇 가지 오타가 있습니다. 정확히 작동하지 않는 것은 무엇입니까? – Dogbert

답변

1

플러그인을 사용하지 않고 유효성을 검사하는 가장 간단한 방법은 일부 정규식 정규식을 작성하고 모든 조건이 통과되면 프로세스를 계속 진행하는 것입니다. 아래 링크를 참조하십시오.이 코드를 복사했습니다. 사이트에 게시하고 링크를 방문하여 유효성 검사 스타일을 사용자 정의하십시오. 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"); 
     }); 
});

출처

2011-07-29 07:51:08 abhijit

관련 문제

 관련 문제