0

ログイン フォームに colorbox を使用しており、パスワード/メール フィールドを JavaScript で検証したいと考えています。ただし、ログイン ボタンに割り当てたクリック ハンドラが何らかの理由で起動しません。注: js コンソールにエラーは表示されません。私のクリックハンドラは次のようになります:

$("#login-button").click(function () {

    $("#email-error").html("");
    $("#password-error").html("");
    $("#email-password-error").html("");

    var regex = new RegExp("/\A([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\Z/i");
    var count = 0;
    alert("hey")
    if ($("#user_email").val() == "") {
        $("#email-error").html("Email is required");
        count += 1;
    } else if (!(regex.test($("#user_email").val()))) {
        $("#email-error").html("Email format incorrect");
        count += 1;
    }

    if ($("#user_password").val() == "") {
        $("#password-error").html("Password is required");
        count += 1;
    }

    if ($("#user_password").val() == "" && ($("#user_email").val() == "" || !(regex.test($("#user_email").val())))) {
        $("#password-error").html("");
        $("#email-error").html("");
        $("#email-password-error").html("Invalid email/name/password combination");
        count += 1;
    }

    if (count == 0) {
        $("#login-submit").click();
    }

});

カラーボックスに読み込まれるファイルは次のようになります。

<div class="padding txt-center">
     <h1 class="open-sans">LOG IN TO WEBSITE</h1> 
    <!--br/>
    < div class="wrap"> <a href="#" class="button txt-center bg-facebook">login with facebook</a>  <a href="#" class="button txt-center bg-twitter">login with twitter</a> 
        <br/>
        <br/> <i></i> 
        </div-->
</div>
<!--br/-->
<div class="padding sign-form txt-center">
    <!--h1 class="no-margin-bottom">Or Use Your Email</h1--> <a href="#" onclick="$.colorbox.next()" class="underline">Do not have an account?</a> 
    <br/>
    <br/>
    <%=f orm_for(resource, :as=>resource_name, :url => session_path(resource_name), :html => {:class=>"wrap center"}) do |f| %>
        <%=f.text_field :email, :placeholder=>'Email'%>
            <div class="error-notice" id="email-error"></div>
            <%=f.password_field :password, :placeholder=>'Password'%>
                <div class="error-notice" id="password-error"></div>
                <div class="txt-right"> <a href="#" class="forgot"><i>Forgot your password?</i></a>

                </div>
                <div class="error-notice" id="email-password-error"></div>
                <div class="button" style="width:22%;cursor:pointer;background-color:#F0F0F0;" id="login-button">LOGIN</div>
                <%if @host !='localhost' %>
                    <%=f.submit 'LOGIN', :class=>'button', :onclick =>"_gaq.push(['_trackEvent', 'Retention', 'Login']);"%>
                        <%else%>
                            <%=f.submit 'LOGIN', :class=>'button', :id=>"login-submit", :style=>"display:none;"%>
                                <%end%>
                                    <%end%>
</div>
<br/>
4

1 に答える 1

1

main.js の関数のクリック ハンドラー内にコードを配置し、ログイン ボタンに onClick html 属性を追加して、前述の関数を呼び出すことで、これを機能させることができました。

そのようです：

<span class="button" style="width:22%;cursor:pointer;background-color:#F0F0F0;" id="login-button" onClick="login_click();">LOGIN</span>

クリックイベントが以前に登録されなかった理由についてはまだ興味がありますが。ajaxでロードされているカラーボックス用のファイルと何か関係がありますか?

于 2013-08-09T15:21:21.703 に答える