0

メールに送信するためにフォームでphpを使用するようにしましたが、すべてのフィールドが入力された場合にのみフォームを送信することはできません.

空っぽにすると、すべてが良い色になります。

空のままにしたフィールドがあるときにフィードバックメッセージを表示したいだけです。

また、ラベルの奇妙な使用法を気にしないでください。正しい方法でそれを行うと、css は機能しません。

HTML

             <form id="contactform" action="php/send.php" method="post">
                  <div class="box">
                    <label>
                       <span>Full name *</span>
                       <input type="text" class="input_text" name="name" id="name"/>
                    </label>
                     <label>
                       <span>Email *</span>
                       <input type="text" class="input_text" name="email" id="email"/>
                    </label>
                     <label>
                        <span>Subject *</span>
                        <input type="text" class="input_text" name="subject" id="subject"/>
                    </label>
                    <label>
                        <span>Message *</span>
                        <textarea class="message" name="feedback" id="feedback"></textarea>
                    </label>
                    <label>
                    <input type="submit" class="button" value="Submit Form" />
                    </label>
                </div>
            </form>

JS

  $(document).ready(function(){



//------------------- VALIDATIE CONTACT FORM ------------------------
//------ VARIABELEN DECLAREREN------
var naam = false;
var valnaam = "";
var email = false;
var valemail = "";
var message = false;
var valmessage = "";

//---- NAAM ----
$("#name").bind("focus",function(){
    if (naam == false)
    {
        $(this).css("borderColor","red");

    }
    else
    {
        $(this).css("borderColor","green");
    }



});
$("#name").bind("keyup", function(){
    valnaam = $(this).val();
    if (valnaam <= 1) {
        $(this).css("borderColor","red");
        naam = false;

    }
    else
    {
        $(this).css("borderColor","green");
        naam = true;
    }
});

//------ EMAIL -------
$("#email").bind("focus",function(){
    if (email == false)
    {
        $(this).css("borderColor","red");

    }
    else
    {
        $("#email").css("borderColor","green");
    }
});

$("#email").bind("keyup", function(){
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var address = $("#email").val();
    if(reg.test(address) == false) 
    {
       $("#email").css("borderColor","red");
       email = false; 

    }
    else
    {
        $("#email").css("borderColor","green");
        email = true; 
    }
});

    //---- Onderwerp ----
$("#subject").bind("focus",function(){
    if (naam == false)
    {
        $(this).css("borderColor","red");

    }
    else
    {
        $(this).css("borderColor","green");
    }



});
$("#subject").bind("keyup", function(){
    valnaam = $(this).val();
    if (valnaam <= 1) {
        $(this).css("borderColor","red");

        naam = false; 
    }
    else
    {
        $(this).css("borderColor","green");
        naam = true;
    }
});

//------ BERICHT ------

$("#feedback").bind("focus",function(){
    if (message == false)
    {
        $(this).css("borderColor","red");

    }
    else
    {
        $(this).css("borderColor","green");
    }   

});
$("#feedback").bind("keyup", function(){
    valmessage = $(this).val();
    if (valmessage <= 1) {
        $(this).css("borderColor","red");
        message = false; 

    }
    else
    {
        $(this).css("borderColor","green");
        message = true;
    }
});
 });
4

2 に答える 2

0

さて、jquer.validateを使用できるかどうかについてコメントしましたが、次のような場合に備えて例を挙げたほうがよいと思いました。

$("#contactform").validate({
  rules: {
    name: "required",
    email: "required",
    subject: "required",
    feedback: "required"
  }
});

デフォルトのCSSクラスはとです。これら2つのクラスに適切なスタイルを設定するだけerrorでvalid、すべて設定されます。

モードのデモはここにあります。

于 2012-12-30T16:30:06.213 に答える
0

こんにちは、検証関数バインディングを使用して、フォームの「onsubmit」イベントで検証することをお勧めします。元：

$('#formId').submit(function(submitEvent) {
 //validation code
 if(validationCriteriaNotMet){
  submitEvent.preventDefault();// prevent form submission.
//other activity like attaching changing css properties of elements or adding proper
 }

});

さらに、 Jquery Validation Pluginsを使用してフォームを検証し、すべての検証定型コードをすべて自分で作成することを避けることができます。

于 2012-12-30T16:36:39.813 に答える