复杂形式的POST和验证

Question

我问了这个问题on a previous occasion，但显然没人理解，只要他们花时间看我发布的链接。我仍然在努力做到这一点，我真的需要帮助。

我有一张表格可以注册“活动”;它需要第一部分中人员的姓名，电子邮件和联系电话。然后有两个男性或女性复选框。如果选中男性，则会针对男性活动显示下一部分，他们必须选择场地，他们想要加入的时间以及会话数量。选择女性时也一样。

男性下的某些领域没有选择但只有一个设定值 - 例如只有场地，所以我会设置文字来显示场地名称。

我会发布一个表单链接。我得到所有的显示功能，但使用AJAX的表单发布不起作用。

问题在于，尽管“女性”部分在显示中隐藏，但它仍然存在于代码中，jQuery也希望验证该部分。在发布表单时，场地ID，时间ID和会话ID对于男性和女性发布表单是相同的。我是这样做的，因为如果选择“男人”，不应该在代码中显示女性部分。

我认为我做错了。我是否应该在特定的男性或女性选择中添加jQuery的每个部分？

以下是我目前的情况：http://jsfiddle.net/8U6e2/23/

<h3>Register</h3>

<div class="new_message">
<form action="" method="POST" id="register">
    <fieldset id="personal-info">
        <ul>
            <li class="clearfix">
                <label for="regFirstname">Firstname:</label>
                <input type="text" rel="req" name="regFirstname" id="regFirstname" placeholder="First Name" />  
                <span class="error_message error_regFirstname">*required</span>

            </li>
            <li class="clearfix">
                <label for="regLastname">Lastname:</label>
                <input type="text" rel="req" name="regLastname" id="regLastname" placeholder="Last Name" /> 
                <span class="error_message error_regLastname">*required</span>

            </li>
            <li class="clearfix">
                <label for="regEmail">Email:</label>
                <input type="email" rel="req" name="regEmail" id="regEmail" placeholder="Email" />  
                <span class="error_message error_regEmail">*required</span>

            </li>
            <li class="clearfix">
                <label for="regContact">Contact Number</label>
                <input type="text" name="regContact" id="regContact" placeholder="Contact Number" />    
                <span class="error_message error_regContact">*required</span>

            </li>
            <li class="clearfix radio-select">
                <label for="sex">Male</label>
                <input type="radio" name="regSex" id="regSex" class="men" />
                <label for="sex">Female</label>
                <input type="radio" name="regSex" id="regSex" class="women" />  
                <span class="error_message error_regEmail">*required</span>
            </li>
        </ul>
    </fieldset>
    <fieldset id="women" class="women">
        <ul>
            <li class="clearfix">
                <label for="regVenue">Venue:</label>
                <select name="regVenue" id="regVenue">
                    <option value="">Select a venue</option>
                    <option value="moreleta">this venue1 - women</option>
                    <option value="faerie-glen">this venue2 - women</option>
                </select>   
                <span class="error_message error_regVenue">*required</span>
            </li>
            <li class="clearfix" id="select-time1" value="moreleta">
                <label for="regTime">Time:</label>
                <select name="regTime" id="regTime">
                    <option value="">Select a time slot</option>
                    <option value="8h00">this time1 - venue1</option>
                    <option value="17h15">that time2 - venue1</option>
                </select>   
                <span class="error_message error_regTime">*required</span>
            </li>
            <li class="clearfix" id="select-time2" value="faerie-glen">
                <input type="text" value="5h30 - 6h30 (mornings)" class="hide" />   
                <span class="label">Time:</span> this time - venue2</li>
            <li class="clearfix">
                <label for="timesWeek">Times a week:</label>
                <select name="timesWeek" id="regTimesWeek">
                     <option value="">select frequency...</option>
                    <option value="moreleta">twice a week</option>
                    <option value="faerie-glen">three times a week</option>
                </select>   
                <span class="error_message error_regTimesweek">*required</span>
            </li>
        </ul>
    </fieldset>
    <fieldset id="men" class="men">
        <ul>
            <li class="clearfix"><span class="label">Venue:</span> 
                this venue - men
                <input class="hide" type="text" value="this venue" id="regVenue" name="regVenue"/>
            </li>
            <li class="clearfix"><span class="label">Time:</span> 
                This time - men
                <input class="hide" type="text" value="this venue" id="regTime" name="regTime"/>
            </li>
            <li class="clearfix">
                <label for="timesWeek">Times a week:</label>
                <select name="timesWeek" id="timesWeek">
                    <option value="">select frequency...</option>
                    <option value="twice a week">twice a week</option>
                    <option value="three times a week">three times a week</option>
                </select>
                <span class="error_message error_regTimesweek">*required</span>
            </li>
        </ul>
    </fieldset>
    <input class="buttonLink" type="submit" value="Register" id="regSubmit" />
</form>
</div>

h3{
   font-weight:bold;
   font-size:18px;
   margin-bottom:30px;
}
ul li {
   position:relative;
   margin-bottom:10px;
}

fieldset#women{ display: none;}

fieldset#men{display: none;}

li#select-time1, li#select-time2{
    display: none;
}
label, .label{width:130px;display:inline-block;}
li.radio-select{padding-left: 108px; position: relative;}
li.radio-select label{float: left; width: auto !important; margin-left: 28px;}
li.radio-select input{ float: left; margin-left: 20px;}
span.error_message{background: #e39595;color: white;padding: 3px 12px;border-radius: 5px;position: absolute;top: 0;display: none;z-index: 100;}
.hide{display:none}


// on form selection display appropriate fields 

var $men = $("fieldset.men"),
    $women = $("fieldset.women");

$(':radio.men').on('click', function () {
    if ($women.css('display', 'block' === true)) {
        $women.fadeOut(300, function () {
            $men.fadeIn('slow');
        });
    } else {
        $men.fadeIn('slow');
    }
});

$(':radio.women').on('click', function () {
    if ($men.css('display', 'block' === true)) {
        $men.fadeOut(300, function () {
            $women.fadeIn('slow');
        });
    } else {
        $women.fadeIn('slow');
    }
});

// Change display of times depending on selection made on venues

$('#regVenue').change(function () {
    var selectVal = $('#regVenue option:selected').val(),
        venue1 = $('li#select-time1'),
        venue2 = $('li#select-time2');
    if (selectVal === "moreleta") {
        venue2.fadeOut(300, function () {
            venue1.fadeIn(300);
        });
    }
    if (selectVal === "faerie-glen") {
        venue1.fadeOut(300, function () {
            venue2.fadeIn(300);
        });
    }
});

// form validation and send request

$('#regSubmit').on('click', function () {
    $('.error_message').hide();

    var regFirstname = $('input#regFirstname').val();
    if (regFirstname === "") {
        $("span.error_regFirstname").show();
        $("input#regFirstname").focus();
        return false;
    }
    var regLastname = $('input#regLastname').val();
    if (regLastname === "") {
        $("span.error_regLastname").show();
        $("input#regLastname").focus();
        return false;
    }
    var regEmail = $('input#regEmail').val();
    if (regEmail === "") {
        $("span.error_regEmail").show();
        $("input#regEmail").focus();
        return false;
    }

    var regContact = $('input#regContact').val();
    if (regContact === "") {
        $("span.error_regContact").show();
        $("input#regEmail").focus();
        return false;
    }

    var regSex = $('input#regSex').val();

    var regVenue = $('select#regVenue').val();
    if (regVenue === "") {
        $("span.error_regVenue").show();
        $("select#regVenue").focus();
        return false;
    }
    var regTime = $('select#regTime').val();
    if (regTime === "") {
        $("span.error_regTime").show();
        $("select#regTime").focus();
        return false;
    }

    var regTimesweek = $('select#regTimesweek').val();
    if (regTimesweek === "") {
        $("span.error_regTimesweek").show();
        $("select#regTimesweek").focus();
        return false;
    }


    var info = 'regFirstname=' + regFirstname + '&regLastname=' + regLastname + '&regEmail=' + regEmail + '&regContact=' + regContact + '&sex=' + regSex + '&regVenue=' + regVenue + '&regTime=' + regTime + '&regTimesweek=' + regTimesweek;

    $.ajax({

        type: "POST",
        url: "register_form.php",
        data: info,
        success: function () {
            $('#register_form').html("<div id='new_message'></div>");
            $('#new_message').html("<h3>Thank you for registering to join GO-Active Boot Camp!</h3>").append("<p>We will be in touch soon.</p>").hide().fadeIn(1500, function () {
                $('#new_message');
            });
        }
    });
    return false;

});

php表单

<?php

/* Set e-mail recipient */
$myemail  = "me@email.com";
$subject = "Go-Active - Contact Form";

$headers =  'From: me@email.com' . "\r\n" .
        'Reply-To: me@email.com';

$regFirstname = check_input($_POST['regFirstname'], "Please Name");
$regLastname  = check_input($_POST['regLastname'], "Please Name");
$regEmail     = check_input($_POST['regEmail'],"Please enter valid Email Address");
$regContact   = check_input($_POST['regContact'],"Please enter valid Contact Number");
$regSex       = check_input($_POST['regSex'],"Please select you sex");
$regVenue     = check_input($_POST['regVenue'],"Please select a Venue");
$regTime      = check_input($_POST['regTime'],"Please select you Timeslot");
$regTimesweek = check_input($_POST['regTimesweek'],"Please select how many times a week");

$myError = 0;

/* If e-mail is not valid show error message */
if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $regEmail))
{
   $myError=("E-mail address not valid");
}

/* Let's prepare the message for the e-mail */

$message = "Hello!

Your contact form has been submitted by:

Name:". $regFirstname . " " . $regLastname ."\r\n" .
"E-mail:".$regEmail."\r\n" .
"Subject:".$message_subject."\r\n" . "\r\n" .
"Message:" . "\r\n" . "\r\n" .$content. "\r\n" . "\r\n" .

"End of message";

/* Send the message using mail() function */
@mail($myemail, $subject, $message, $headers);

echo $myError;

function check_input($data,  $problem='')
{
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    if ($problem && strlen($data) == 0)
       {
           $myError = ($problem);
       }

    return $data;
    }

?>

Answer 1

当您的JavaScript检查表单字段是否有效时，请检查其中选择的性别。如果是男性，请验证它，如果是女性，则不要（但使用相同的逻辑验证其他字段）。

像：

if (gender.val() == 'male') { 
    if (myfield.val() == 'what it should be') {
        //Valid
    } else {
        //Invalid
    }
}

您可以通过为每个字段提供一个特殊属性来告诉您的脚本验证它，从而使它更进一步（并使自己更容易）。

<input type="text" name="myfield" class="validate email" />

在你的jQuery中：

$('INPUT.validate').each(function() { ... perform validation ... })

我个人喜欢使用与每个浏览器兼容的HTML5数据属性。例如：

<input type="text" name="myfield" data-validate="email" />

玩得开心！ （验证是一个婊子）