2012-03-04 22 views
0

私はJQueryを使い慣れていないので、いくつかの編集でモーダルポップアップフォームの例を試しています。この例では、名前、電子メール、およびパスワードがフォームにあります。私は電子メールだけが欲しかったので、他の2つは削除しました。それらを削除する前に、ボタンをクリックしたときにのみフォームがEnterに送信されていませんでした。それらを削除した後、フォームは入力時に送信され、電子メールの検証はスキップされます。ここでEnterキーでモーダルポップアップの確認

はコードです:

<script type="text/javascript"> 
      $(function() { 

       //Modal pop-up form 
       // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! 
       $("#dialog:ui-dialog").dialog("destroy"); 

       var email = $("#email"), 
         allFields = $([]).add(email), 
         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: 350, 
        width: 350, 
        modal: true, 
        buttons: { 
         "Send Login": function() { 
          var bValid = true; 
          allFields.removeClass("ui-state-error"); 

          bValid = bValid && checkLength(email, "email", 6, 80); 

          // 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, "Please enter a valid email address."); 

          if (bValid) { 
           $("#users tbody").append("<tr>" + 
             "<td>" + email.val() + "</td>" + 
            "</tr>"); 
           $(this).dialog("close"); 
           $("form[name='modalPopup']").submit() 
          } 

         }, 
         Cancel: function() { 
          $(this).dialog("close"); 
         } 
        }, 
        close: function() { 
         allFields.val("").removeClass("ui-state-error"); 
        } 
       }); 

       $("#send-password") 

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


      }); 
       </script> 

そして、ここでは私のフォームです:

<div id="dialog-form" title="Send My Login"> 
        Enter the email address associated with your account. Your password will be sent to you. 
        <br /> 
        <strong>If you do not have an email address</strong>, or do not 
        remember it, please contact your Human Resources department to have your login 
        provided to you. 

        <p class="validateTips"></p> 

        <form action="SendLogin.asp" method="Post" name="modalPopup"> 
        <fieldset> 

         <label for="email">Email</label> 
         <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> 

        </fieldset> 
        </form> 
       </div> 

私はここに欠けているものを任意のアイデア?

+0

メールの検証正規表現は動作しません呼び出す必要がありますが、ボタン

<button id="send-password">a button</button> 

が欠けていると思います。 –

答えて

0

は、私は、これは

$("#send-password") 
    .click(function() { 
    $("#dialog-form").dialog("open"); 
    }); 
}); 
+0

返答いただきありがとうございますが、ボタンがありません。私は実際にそのページをさらに下に持っている、私はちょうどコードにそれを含めていない。ポップアップが開かれています。私の問題は、私がEnterを押すと、検証をバイパスしてフォームを送信することです。他のアイデア? – Cineno28

関連する問題