Question

我只是让我的表单使用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;
    }
});
 });

Answer 1

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

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

默认的CSS类是error和valid，所以只需为这两个类设置合适的样式即可。

可以找到模式演示here。

Answer 2

您好我建议通过验证函数绑定来验证表单的'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来验证表单，避免自行编写所有验证样板代码。

Jquery表单验证errormessage问题

2 个答案: