1

私はこれをほとんど機能させています: http://jsfiddle.net/HFzkW/ 私のコードは次のようになります:

<div id="cform-container">
<div class="alignleft" id="cform">
    <form action="<?php print site_url('/sent'); ?>" method="POST" >
    <input type="hidden" name="Contact-Form" value="contact-form" />
        <div class="cform-row">
            <div class="alignleft cform-label"><label for="yn">Your Name</label><span id="star5">*</span></div>
            <div class="alignright cform-ti"><input type="text" name="yn" id="yn" /><br /><span id="namespan" value="0"></span></div>
            <div class="clearboth"></div>
        </div>
        <div class="cform-row">
            <div class="alignleft cform-label"><label for="cn">Company Name</label></div>
            <div class="alignright cform-ti"><input type="text" name="cn" id="cn" /></div>
            <div class="clearboth"></div>
        </div>
        <div class="cform-row">
            <div class="alignleft cform-label"><label for="em">Email Address</label><span id="star5">*</span></div>
            <div class="alignright cform-ti"><input type="text" name="em" id="em" /><br /><span id="emailspan" value="0"></span></div>
            <div class="clearboth"></div>
        </div>
        <div class="cform-row">
            <div class="alignleft cform-label"><label for="ph">Phone Number</label><span id="star5">*</span></div>
            <div class="alignright cform-ti"><input type="text" name="ph" id="ph" /><br /><span id="phonespan" value="0"></span></div>
            <div class="clearboth"></div>
        </div>
        <div class="cform-row">
            <div class="alignleft cform-label"><label for="ct">Industry</label></div>
            <div class="alignright cform-ti"><input type="text" name="ct" id="ct" /></div>
            <div class="clearboth"></div>
        </div>
        <div class="cform-row">
            <div class="alignleft cform-label"><label for="msg">Message</label></div>
            <div class="alignright cform-ti"><textarea name="msg" id="msg"></textarea></div>
            <div class="clearboth"></div>
        </div>
        <div id="cform-btn"><input type="submit" value="Submit" /></div>
    </form>
</div>
<script id="source" language="javascript" type="text/javascript">
 $(function(){  
    $("input[type=submit]").attr("disabled", "disabled");
    $("#em").blur(function() 
            {
             var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
             var emailaddress = $("#em").val();
             if(!emailReg.test(emailaddress) | emailaddress=="") {
                $("#emailspan").html('<font color="#cc0000">Please enter valid Email address</font>');
             }else{
                $("#emailspan").html('<font color="#cc0000"></font>');  
                }
            });
    $("#yn").blur(function() 
            {
             var namefield = $("#yn").val();
             if(namefield=="") {
                $("#namespan").html('<font color="#cc0000">Please enter your name</font>');  
             }else{
                $("#namespan").html('<font color="#cc0000"></font>');  
                }
            });                                 
    $("#ph").blur(function() 
            {
             var phonefield = $("#ph").val();
             if(phonefield=="") {
                $("#phonespan").html('<font color="#cc0000">Please enter your name</font>');  
             }else{
                $("#phonespan").html('<font color="#cc0000"></font>');  
                }
            });
$('input, textarea').change(function(){
    var validation;
    var email = $("#em").val();
    var name = $("#yn").val();
    var phone = $("#ph").val();

    if ( email == "" && name == "" && phone == "" ) {
    validation = false;
    } else if ( email != "" && name != "" && phone != "" ) {
    alert ("variables"+email+name+phone);
    validation = true;
    }
    if (validation = true) {
    $("input[type=submit]").removeAttr("disabled"); 
    } else {
    $("input[type=submit]").attr("disabled", "disabled");
    }
});
});

ただし、完全に機能させることはできません。ユーザーがフィールドの 1 つ (あなたの名前など) を入力すると、[送信] ボタンが無効になりません。

「必須」フィールドの 3 つすべてが満たされるまで、[送信] ボタンを無効にしたままにします。そのためのコードはかなり明確だと思いましたが、まだ機能していません。

また、ここでは JSFiddle で動作しますが、動作させようとしている Wordpress サイトでは動作しません。それをチェックするためのアイデアもいただければ幸いです。

4

3 に答える 3

3

and を or に切り替えてみてください。論理に注意して、大声で言ってみて、それが理にかなっていることを確認してください。

メールが空白、名前が空白、電話が空白の場合、検証は false です。実際に望んでいたのは、フィールドが空白の場合、検証は false であるということでした。

if ( email == "" || name == "" || phone == "" ) {
validation = false;
} else if ( email != "" && name != "" && phone != "" ) {
alert ("variables"+email+name+phone);
validation = true;
}

また、validation=trueifステートメントで設定しています。これは常に true を返します。これに変更します。if (validation == true) {

于 2013-04-22T22:27:10.270 に答える
0

だから基本的に：

<form id="myForm" onfocus="submitButton("myForm);">
  <input type="text" name="name" placeholder="Name">
  <input type="text" name="email" placeholder="Email">
  <input type="text" name="phone" placeholder="Phone">
</form>

と

function submitButton(formID){

  var formObject = document.getElementById(formID);

  var name = formObject.name.value;
  var email = formObject.email.value;
  var phone = formObject.phone.value;

  if (name && email && phone) {
    showSubmitButton();
  } else {
    //keep the button hidden
  }
}
于 2013-04-22T22:45:54.210 に答える
0

私が見る限り、これをデバッグするために最初に行うことです (コードは少しわかりにくいので、コピーするのではなく、いくつかのガイドラインを示します)。

それ以外の

 if(validation = true )

試す

 if(validation)

これは、パラメーターがないと、false、未定義、または null でないことを確認するためです。おそらく、電子メール名と電話番号についても同じことができます。

于 2013-04-22T22:31:54.733 に答える