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

嗨，我建议通过验证函数绑定来验证表单的“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 验证插件来验证表单，以避免自己编写所有验证样板代码。

于 2012-12-30T16:36:39.813 回答
0

好吧，我评论了你是否可以只使用 jquer.validate，但我想我不妨举一个例子，以防你可以：

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

默认的 CSS 类是errorand valid，所以只需为这两个类设置适当的样式就可以了。

模式演示可以在这里找到。

于 2012-12-30T16:30:06.213 回答