1. 首頁
  2. 問答
  3. 複雜的表單POST和驗證

複雜的表單POST和驗證

2013-05-09 100 views
0

我問這個問題on a previous occasion但顯然沒有人理解，如果他們花時間看我發佈的鏈接。我仍然努力做到這一點，我真的需要幫助。複雜的表單POST和驗證

我有一個註冊「事件」的表單;它需要第一部分中人員的姓名，電子郵件和聯繫電話號碼。然後有兩個男性或女性複選框。如果選中男性，則下一部分出現在男性選手的活動中，他們必須選擇場地，參加比賽的時間以及參加比賽的次數。選擇女性時也一樣。

男人的某些領域沒有選擇，而是一個設定值 - 例如只有在場地，所以我會設置文本顯示場地名稱。

我會發佈一個鏈接到表單。我獲得了所有的顯示功能，但使用AJAX發佈表單不起作用。

問題是，雖然「女性」部分隱藏顯示它仍然在代碼中，jQuery也想驗證該部分。當發佈表單時，會場編號，時間標識和會話編號對於發佈表單的男性和女性是相同的。我這樣做是因爲如果選擇「男人」，則不應該在代碼中顯示女性部分。

我覺得我這樣做是錯的。我應該添加每個部分與特定的男性或女性選擇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 = "[email protected]"; 
$subject = "Go-Active - Contact Form"; 

$headers = 'From: [email protected]' . "\r\n" . 
     'Reply-To: [email protected]'; 

$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; 
    } 

?>

來源

2013-05-09 Gavin Wood

+3

然後只需添加一個條件：如果男性被選中，只驗證相應的男性領域，反之亦然 – billyonecan 2013-05-09 07:38:57

+0

你也可以在這裏發佈代碼嗎？ jsfiddle不會在慢速連接上加載。 – itachi 2013-05-09 07:55:52

+0

即時通訊不知道如何發佈代碼在這裏....在這個評論部分它說長 – 2013-05-09 07:57:52

回答

0

當你的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" />

玩得開心！ （驗證是一個婊子）

來源

2013-05-09 09:29:16 Jared

相關問題

 相關問題