Question

联系表单正常工作，如果你填写它，它会发送消息。问题是，如果你没有填写电子邮箱，表格没有提醒你，那么我是否可以向用户显示一个字或一些警告？

这是我的标记：

<div class="form">
        <h2>ESCRIBENOS</h2>
        <form method="post" action="process.php">
        <div class="element">
            <label>Nombre (obligatorio):</label><br/>
            <input type="text" name="name" class="text" />
        </div>
        <div class="element">
            <label>Email (obligatorio):</label><br/>
            <input type="text" name="email" class="text" />
        </div>
        <div class="element">
            <label>Telefono:</label><br/>
            <input type="text" name="website" class="text" />
        </div>
        <div class="element">
            <label>Mensaje:</label><br/>
            <textarea name="comment" class="text textarea" /></textarea>
        </div>
        <div class="element">

            <input type="submit" id="submit"/>
            <div class="loading"></div>
        </div>
        </form>
        </div>

这是我的剧本：

$(document).ready(function() {

//if submit button is clicked
$('#submit').click(function () {        

    //Get the data from all the fields
    var name = $('input[name=name]');
    var email = $('input[name=email]');
    var website = $('input[name=website]');
    var comment = $('textarea[name=comment]');

    //Simple validation to make sure user entered something
    //If error found, add hightlight class to the text field
    if (name.val()=='') {
        name.addClass('hightlight');
        return false;
    } else name.removeClass('hightlight');

    if (email.val()=='') {
        email.addClass('hightlight');
        return false;
    } else email.removeClass('hightlight');

    if (comment.val()=='') {
        comment.addClass('hightlight');
        return false;
    } else comment.removeClass('hightlight');

    //organize the data properly
    var data = 'name=' + name.val() + '&email=' + email.val() + '&website=' + 
    website.val() + '&comment='  + encodeURIComponent(comment.val());

    //disabled all the text fields
    $('.text').attr('disabled','true');

    //show the loading sign
    $('.loading').show();

    //start the ajax
    $.ajax({
        //this is the php file that processes the data and send mail
        url: "../process.php",  

        //GET method is used
        type: "GET",

        //pass the data         
        data: data,     

        //Do not cache the page
        cache: false,

        //success
        success: function (html) {              
            //if process.php returned 1/true (send mail success)
            if (html==1) {                  
                //hide the form
                $('.form').fadeOut('slow');                 

                //show the success message
                $('.done').fadeIn('slow');

            //if process.php returned 0/false (send mail failed)
            } else alert('Sorry, unexpected error. Please try again later.');               
        }       
    });

    //cancel the submit button default behaviours
    return false;
}); 
});

有人可以帮帮我吗？

Answer 1

试试这个：

var name = $('input[name=name]');
        var email = $('input[name=email]');
        var website = $('input[name=website]');
        var comment = $('textarea[name=comment]');

        //Simple validation to make sure user entered something
        //If error found, add hightlight class to the text field

        $('input[type=text]').each(function(){
             if($(this).val().length == 0){
                $(this).addClass('hightlight');
                alert('Empty input field')
                return false;
             }
        });

....其余的代码

注意：这不适用于textarea，但我认为你可以自己解决这个问题！

编辑：

  var valid = false;

    $('input[type=text]').each(function(){
             if($(this).val().length == 0){
                $(this).addClass('hightlight');
                alert('Empty input field')
                valid = false;
             }else{
                valid = true;
             }
        });


    if(valid == false) return; 
        console.log('All input fields are filled in..');

...其余的代码。您可以删除输入字段的if else语句。要检查textarea，您可以为所有字段提供相同的类并执行：

$('form.classofallelements').each(function(){

在wordpress表单上需要提醒

1 个答案: