javascript - 获取并验证复选框和单选按钮的值

Question

我有以下表格:

<form id="frmEnquiry" action="" method="post" enctype='multipart/form-data'>
    <div id="mail-status"></div>
    <div class="w-row">
        <div class="w-col w-col-3 w-col-stack form-padding-left no-left-padding ">
            <div class="form-label">Name:</div>
            <input
                type="text" name="userName" id="userName"
                class="demoInputBox width"  placeholder="Name">
        </div>
        <div class="  w-col w-col-3 w-col-stack no-left-padding">
            <div class="form-label">Phone Number:</div>
            <input
                type="text" name="phone" id="phone"
                class="demoInputBox width" placeholder="phone">
        </div>
        <div class="  w-col w-col-3 w-col-stack no-left-padding">
            <div class="form-label">E-Mail:</div>
            <input
                type="text" name="userEmail" id="userEmail"
                class="demoInputBox width" placeholder="Email">
        </div>
        <div class="  w-col w-col-3 w-col-stack no-left-padding">
            <div class="form-label">ZIP / City of job site:</div>
            <input
                type="text" name="zip" id="zip"
                class="demoInputBox width" placeholder="zip">
        </div>
    </div>

    <div class="w-row">
        <div class="w-col w-col-3 w-col-stack form-padding-left no-left-padding">
            <div class="form-label ">Date you would like to set up for: </div>
            <input class="demoInputBox width" name="Date" id="Date" type="date">
        </div>
        <div class="w-col w-col-3 w-col-stack no-left-padding">
            <div class="form-label">Preferred Appointment Time:</div>
            <input class="demoInputBox width" name="Time" id="Time" type="time">
        </div>
        <div class="w-col w-col-3 w-col-stack no-left-padding"></div>
        <div class="w-col w-col-3 w-col-stack no-left-padding"></div>
    </div>

    <div class="gray-line"></div>

    <div class="form-label ">Surface type:</div>
    <div class="form-options">
        <div class="form-right-margin w-checkbox">
            <input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Tub" type="checkbox">
            <label for="Tub" class="w-form-label">Tub</label>
        </div>
        <div class="form-right-margin w-checkbox">
            <input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Tile" type="checkbox">
            <label for="Tile" class="w-form-label">Tile</label>
        </div>
        <div class="form-right-margin w-checkbox">
            <input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Sink" type="checkbox">
            <label for="Sink" class="w-form-label">Sink</label>
        </div>
        <div class="form-right-margin w-checkbox">
            <input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Claw_Foot" type="checkbox">
            <label for="Claw Foot" class="w-form-label">Claw Foot</label>
        </div>
        <div class="form-right-margin w-checkbox">
            <input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Counter_Top" type="checkbox">
            <label for="Counter Top" class="w-form-label">Counter Top</label>
        </div>
        <div class="form-right-margin w-checkbox">
            <input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Jacuzzi" type="checkbox">
            <label for="Jacuzzi" class="w-form-label">Jacuzzi</label>
        </div>
        <div class="form-right-margin w-checkbox">
            <input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Regrout" type="checkbox">
            <label for="Regrout" class="w-form-label">Regrout</label>
        </div>
        <div class="form-right-margin w-checkbox">
            <input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Caulking" type="checkbox">
            <label for="Caulking" class="w-form-label" >Caulking</label> 
        </div>
        <div class="w-checkbox">
            <input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Other" type="checkbox">
            <label for="Other" class="w-form-label">Other</label>
        </div>
    </div>

    <div class="gray-line"></div>
    <div class="form-options">
        <div class="form-right-margin-2">
            <div class="form-label">Has the tub / surface been reglazed before? :</div>
            <div class="form-options">
                <div class="form-right-margin w-radio">
                    <input id="ReglazedBefore" name="ReglazedBefore" value="Yes" class="demoInputBox" type="radio">
                    <label for="Yes" class="w-form-label">Yes</label>
                </div>
                <div class="form-right-margin w-radio">
                    <input id="ReglazedBefore" name="ReglazedBefore" value="No" class="demoInputBox" type="radio">
                    <label for="No" class="w-form-label" >No</label>
                </div>
                <div class="w-radio">
                    <input id="ReglazedBefore" name="ReglazedBefore" value="Unknown"  class="demoInputBox" type="radio">
                    <label for="Unknown" class="w-form-label" >Unknown</label>
                </div>
            </div>
        </div>

        <div>   
            <div class="form-label"> Is the tub covered with:</div>
                <div class="form-options">
                    <div class="form-right-margin w-radio">
                        <input id="TubCovered" name="TubCovered" value="Curtains"  class="demoInputBox" type="radio">
                        <label for="Curtains" class="w-form-label">Curtains</label>
                    </div>
                    <div class="form-right-margin w-radio">
                        <input id="TubCovered" name="TubCovered" value="Glass Door"  class="demoInputBox" type="radio">
                        <label for="Glass Door" class="w-form-label" >Glass door</label>
                    </div>
                    <div class="w-radio">
                        <input id="TubCovered" name="TubCovered" value="Unknown" class="demoInputBox" type="radio">
                        <label for="Unknown" class="w-form-label">Unknown</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="gray-line"></div>

        <div class="form-options">
            <div class="form-right-margin-3">
                <div class="form-label">Do you need to recaulk your bath tub?</div>
                <div class="form-options">
                    <div class="form-right-margin w-radio">
                        <input id="Recaulk" name="Recaulk" value="Yes" class="demoInputBox" type="radio">
                        <label for="Yes" class="w-form-label">Yes</label>
                    </div>
                    <div class="form-right-margin w-radio">
                        <input id="Recaulk" name="Recaulk" value="No" class="demoInputBox" type="radio">
                        <label for="No" class="w-form-label">No</label>
                    </div>  
                </div>
                <p>Please note: tub recaulking is 75$ extra</p> 
            </div>  
            <div class="form-right-margin-3">   
                <div class="form-label"> Do you need non skid treatment for your tub?</div>
                <div class="form-options">
                    <div class=" form-right-margin w-radio">
                        <input id="NonSkid" name="NonSkid" value="Yes"  class="demoInputBox" type="radio">
                        <label for="Yes" class="w-form-label">Yes</label>
                    </div>
                    <div class="form-right-margin w-radio">
                        <input id="NonSkid" name="NonSkid" value="No"  class="demoInputBox" type="radio">
                        <label for="No" class="w-form-label">No</label>
                    </div>              
                </div>
                <p>Please note:  non skid treatment is 75$ extra</p>    
            </div>  
            <div>   
                <div class="form-label"> Does your building has elevator?</div>
                <div class="form-options">
                    <div class=" form-right-margin w-radio">
                        <input id="Elevator" name="Elevator" value="Yes" class="demoInputBox" type="radio">
                        <label for="Yes" class="w-form-label">Yes</label>
                    </div>
                    <div class="form-right-margin w-radio">
                        <input id="Elevator" name="Elevator" value="No" class="demoInputBox" type="radio">
                        <label for="No" class="w-form-label">No</label>
                    </div>
                    <div class="w-radio">
                        <input id="Elevator" name="Elevator" value="Unknown" class="demoInputBox" type="radio">
                        <label for="Unknown" class="w-form-label">Unknown</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="gray-line"></div>

        <div class="form-label ">Additional Comments:</div>
            <div>
                <textarea name="comments" id="comments" class="demoInputBox width"
                          cols="60" rows="4" placeholder="Comments"></textarea>
            </div>

            <div>
                <input type="submit" value="Submit To Book Appointment " class="submit-button btnAction" />
            </div>
</form>

表单按预期通过 Ajax 提交，但我没有收到任何返回的单选按钮和复选框值。我要实现的目标如下:

1. 从我的 PHP 脚本返回的单选按钮和复选框中获取值。
2. 通过 jQuery 使单选按钮和复选框成为必填项

我自己尝试通过以下方式实现这一目标:

$(document).ready(function (e){
    $("#frmEnquiry").on('submit',(function(e){
        e.preventDefault();
        $('#loader-icon').show();
        var valid;  
        valid = validateContact();

        if(valid) {
            $.ajax({
                url: "book-appointmentCopy.php",
                type: "POST",
                data:  new FormData(this),
                contentType: false,
                cache: false,
                processData:false,
                success: function(data){
                    $("#mail-status").html(data);
                    $('#loader-icon').hide();
                },
                error: function(){}             
            });
        }
    }));

    function validateContact() {
        var valid = true;   
        $(".demoInputBox").css('background-color','');
        $(".info").html('');
        $("#userName").removeClass("invalid");
        $("#userEmail").removeClass("invalid");
        $("#phone").removeClass("invalid");
        $("#zip").removeClass("invalid");
        $("#Date").removeClass("invalid");
        $("#Time").removeClass("invalid");
        $("#SurfaceType").removeClass("invalid");
        $("#ReglazedBefore").removeClass("invalid");
        $("#TubCovered").removeClass("invalid");
        $("#Recaulk").removeClass("invalid");
        $("#NonSkid").removeClass("invalid");
        $("#Elevator").removeClass("invalid");
        $("#comments").removeClass("invalid");

        if(!$("#userName").val()) {
            $("#userName").addClass("invalid");
            $("#userName").attr("title","Required");
            valid = false;
        }
        if(!$("#phone").val()) {
            $("#phone").addClass("invalid");
            $("#phone").attr("title","Required");
            valid = false;
        }
        if(!$("#userEmail").val()) {
            $("#userEmail").addClass("invalid");
            $("#userEmail").attr("title","Required");
            valid = false;
        }
        if(!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
            $("#userEmail").addClass("invalid");
            $("#userEmail").attr("title","Invalid Email");
            valid = false;
        }
        if(!$("#zip").val()) {
            $("#zip").addClass("invalid");
            $("#zip").attr("title","Required");
            valid = false;
        }
        if(!$("#Date").val()) {
            $("#Date").addClass("invalid");
            $("#Date").attr("title","Required");
            valid = false;
        }
        if(!$("#Time").val()) {
            $("#Time").addClass("invalid");
            $("#Time").attr("title","Required");
            valid = false;
        }
        if(!$("#SurfaceType").val()) {
            $("#SurfaceType").addClass("invalid");
            $("#SurfaceType").attr("title","Required");
            valid = false;
        }
        if(!$("#ReglazedBefore").val()) {
            $("#ReglazedBefore").addClass("invalid");
            $("#ReglazedBefore").attr("title","Required");
            valid = false;
        }
        if(!$("#TubCovered").val()) {
            $("#TubCovered").addClass("invalid");
            $("#TubCovered").attr("title","Required");
            valid = false;
        }
        if(!$("#Recaulk").val()) {
            $("#Recaulk").addClass("invalid");
            $("#Recaulk").attr("title","Required");
            valid = false;
        }
        if(!$("#NonSkid").val()) {
            $("#NonSkid").addClass("invalid");
            $("#NonSkid").attr("title","Required");
            valid = false;
        }
        if(!$("#Elevator").val()) {
            $("#Elevator").addClass("invalid");
            $("#Elevator").attr("title","Required");
            valid = false;
        }
        if(!$("#comments").val()) {
            $("#comments").addClass("invalid");
            $("#comments").attr("title","Required");
            valid = false;
        }

        return valid;
    }
});

不幸的是，这似乎不适用于单选按钮和复选框。我做错什么了吗？这是我处理表单的 PHP 脚本:

<?php

$message=
    'Name:  '.$_POST['userName'].'<br /><br />
    Phone Number:   '.$_POST['phone'].'<br /><br />
    E-Mail: '.$_POST['userEmail'].'<br /><br />
    ZIP / City of job site: '.$_POST['zip'].'<br /><br />
    Date:   '.$_POST['Date'].'<br /><br />
    Time:   '.$_POST['Time'].'<br /><br />
    Surface type:   '.($_POST['SurfaceType']).'<br /><br />
    Has the tub / surface been reglazed before?:    '.$_POST['ReglazedBefore'].'<br /><br />
    Is the tub covered with:    '.$_POST['TubCovered'].'<br /><br />
    Do you need to recaulk your bath tub?:  '.$_POST['Recaulk'].'<br /><br />
    Do you need non skid treatment for your tub?:   '.$_POST['NonSkid'].'<br /><br />
    Does your building has elevator?:   '.$_POST['Elevator'].'<br /><br />
    Additional Comments:    '.$_POST['comments'].'
';

require('phpmailer/class.phpmailer.php');

$mail = new PHPMailer();
$mail->IsSMTP();
$mail->SMTPDebug = 0;
$mail->SMTPAuth = TRUE;
$mail->SMTPSecure = "ssl";
$mail->Port     = 465;  
$mail->Username = "mymail@gmail.com";
$mail->Password = "mypass";
$mail->Host     = "smtp.gmail.com";
$mail->Mailer   = "smtp";
$mail->SetFrom($_POST["userEmail"], $_POST["userName"]);
$mail->AddReplyTo($_POST["userEmail"], $_POST["userName"]);
$mail->AddAddress("myemailaddress");     // Where to send it - Recipient
$mail->Subject = " Form - https://www..com/";      // Subject (which isn't required)  
$mail->WordWrap   = 80;
$mail->MsgHTML($message);
foreach ($_FILES["attachment"]["name"] as $k => $v) {
    $mail->AddAttachment( $_FILES["attachment"]["tmp_name"][$k], $_FILES["attachment"]["name"][$k] );
}

$mail->IsHTML(true);

if(!$mail->Send()) {
    echo "<meta http-equiv=\"refresh\" content=\"0;URL=error.html\">";
} else {
    echo "<meta http-equiv=\"refresh\" content=\"0;URL=contact-thanks.html\">";
}

?>

Answer 1

好的。首先让我们解决您的第一个问题:从我的 PHP 脚本返回的单选按钮和复选框中获取值。

您没有在 PHP 脚本中获得返回值的原因是因为这些 POST 变量表示 Array而不是普通的字符串。所以不要使用 $_POST['SurfaceType']要获取该值，您需要使用 $_POST['SurfaceType'][0] .或者，为简单起见，您可以使用 Implode()将数组元素连接成普通字符串，如下所示:

$SurfaceType = implode(',' , $_POST['SurfaceType']);

现在$SurfaceType将包含该值，您可以在 $message 中使用它就像您对所有其他变量所做的那样。

现在让我们继续讨论您的第二个问题:通过 jQuery 使单选按钮和复选框成为必需

您尝试过使用:

if(!$("#SurfaceType").val()) {
    $("#SurfaceType").addClass("invalid");
    $("#SurfaceType").attr("title","Required");
    valid = false;
}

但这不适用于单选按钮或复选框。这是因为您实际上需要验证它们是否被选中，而不是它们是否具有值。因此，您应该使用:

if ($('input[name="SurfaceType[]"]:checked').length == 0){
    $("#SurfaceType").addClass("invalid").attr("title","Required");
    valid = false;
}

最后我想补充一点，您可能想要替换所有 <br />里面的元素$message与 \n .当您发送电子邮件时，您使用\n 来创建一个新行。

今晚的旅程对你来说很艰难，你必须表现出很大的耐心，但我希望你已经学到了一些东西，并成为我们 Stack Overflow 上众多杰出成员中的一员!