0

我正在尝试更新以前创建的表单以使用新字段。目前只有电子邮件正在验证,如果您单击发送,则仅显示电子邮件字段为空(将边框变为红色)。

jsFiddle 的代码位于此处

我想我忽略了一个明显的错误。

HTML:

                <div class="success"> Contact form submitted!<br> <strong>We will be in touch soon.</strong></div>
                <form id="form-1" class="form-1" name="form-1" method="post" action="index.html" enctype="multipart/form-data">
                    <input class="inputbox" name="name" id="name" type="text" value="Your Name:" onFocus="if(this.value=='Your Name:'){this.value=''}" onBlur="if(this.value==''){this.value='Your Name:'}" />
                    <input class="inputbox top-2" name="email" id="email" type="text" value="E-mail:" onFocus="if(this.value=='E-mail:'){this.value=''}" onBlur="if(this.value==''){this.value='E-mail:'}" />
                    <input class="inputbox top-2" name="phone" id="phone" type="text" value="Phone:" onFocus="if(this.value=='Phone:'){this.value=''}" onBlur="if(this.value==''){this.value='Phone:'}" />
                    <div class="select-3 top-2 fleft">
                        <select name="select" name="adults" id="adults" >
                            <option selected disabled>Adults</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9+">9+</option>
                        </select>   
                    </div>
                    <div class="select-3 top-2  fleft">
                        <select name="select" name="children" id="children" >
                            <option selected disabled>Children</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9+">9+</option>
                        </select>   
                    </div> 
                    <div class="select-3 top-2 fleft last-1">
                        <select name="select" name="rooms" id="rooms" >
                            <option selected disabled>Rooms</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9+">9+</option>
                        </select>   
                    </div> 
                    <div class="select-2 top-2 fleft">
                        <input class="inputbox_date" name="checkin" id="checkin" value="Check-In Date:" onFocus="if(this.value=='Check-In Date:'){this.value=''}" onBlur="if(this.value==''){this.value='Check-In Date:'}" /> 
                        <input class="inputbox_date" name="checkout" id="checkout" value="Check-Out Date:" onFocus="if(this.value=='Check-Out Date:'){this.value=''}" onBlur="if(this.value==''){this.value='Check-Out Date:'}" />  
                    </div> 
                    <div class="clear"></div>
                    <div class="height-3 border-2 pad-2">
                        <textarea class="textarea top-2" name="comments" id="comments" onFocus="if(this.value=='ADDITIONAL COMMENTS:'){this.value=''}" onBlur="if(this.value==''){this.value='ADDITIONAL COMMENTS:'}">ADDITIONAL COMMENTS:</textarea>
                    </div>
                    <p class="center"><a href="javascript:void(0);" name="submitlink" id="submitlink" class="button top-1">Send</a></p>
                    <div class="clear"></div>
                </form>

JS:

function checkValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+")([\w-+]+(?:\.[\w-+]+)*))(@((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][\d]\.|1[\d]{2}\.|[\d]{1,2}\.))((25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\.){2}(25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\]?$)/i);

    return pattern.test(emailAddress);
};

var mailsendstatus;
function userSendMailStatus(uname, uemail, uphone, uadults, uchildren, urooms, ucheckin, ucheckout, umsg) {
    // checking for some valid user name
    if(!uname) {
        $("#name").addClass('formError');
    }
    else if (uname){
        $("#name").removeClass('formError');    
    }

    // checking for valid email
    if(!checkValidEmailAddress(uemail)) {
        $("#email").addClass('formError');
    }
    else if(checkValidEmailAddress(uemail)) {
        $("#email").removeClass('formError');   
    }

    // checking for phone
    if(!uphone) {
        $("#phone").addClass('formError');
    }
    else if (uphone) {
        $("#phone").removeClass('formError');   
    }

    // checking for checkin
    if(!ucheckin){
        $("#checkin").addClass('formError');
    }
    else if(ucheckin){
        $("#checkin").removeClass('formError'); 
    }

    // checking for checkout
    if(!ucheckout) {
        $("#checkout").addClass('formError');
    }
    else if(!ucheckout){
        $("#checkout").removeClass('formError');    
    }


    if(uname && checkValidEmailAddress(uemail) && uphone && ucheckin && ucheckout) {
        // in this case all of our inputs look good
        // so we say true and send the mail
        mailsendstatus = true;

        $.ajax(
            {
                type: 'POST',
                url: 'js/sendmail.php',
                data: $("#form-1").serialize(),
                success: function(data) {
                    if(data == "yes") {
                    $(".success").toggle();
                    $("#form-1").slideUp(650);
                    }
                }
            }
    )};

    return mailsendstatus;
}

$(document).ready(function(){
    $("#form-1").submit(function() { return false; });

    $("#submitlink").bind("click", function(e){
        var subnamevalue  = $("#name").val();
        var emailvalue    = $("#email").val();
        var phonevalue    = $("#phone").val();
        var adultsvalue   = $("#adults").val();
        var childrenvalue = $("#children").val();
        var roomsvalue    = $("#rooms").val();
        var checkinvalue  = $("#checkin").val();
        var checkoutvalue = $("#checkout").val();
        var msgvalue      = $("#comments").val();


        var postchecks = userSendMailStatus(subnamevalue, emailvalue, phonevalue, adultsvalue, childrenvalue, roomsvalue, checkinvalue, checkoutvalue, msgvalue);
    });
});
4

1 回答 1

0

当您的函数运行以检查它们是否为空时,它会看到您的占位符文本。实际上没有一个字段是空的/空白的。该电子邮件有效,因为您还检查它是否是有效的电子邮件地址。

于 2013-02-28T23:58:56.803 回答