通過HTML選擇器更改輸入驗證類型

我很好奇我怎麼可能一起破解一種方式來檢測用戶從表單的選項中選擇的內容。根據他們的選擇將改變輸入字段文本的處理方式。通過HTML選擇器更改輸入驗證類型

期望的效果：

選項甲：接受文本，因此它的加工馬上，

選項乙：接受電子郵件繼續表單處理之前進行驗證。

選項C：接受電子郵件，所以他們的電子郵件驗證，然後再繼續表單處理。

最後，所有三個選項都附加到文本文件。到目前爲止，我只能通過它來驗證電子郵件。

在此先感謝。

HTML表單：

<form method="post" class="subscription-form form-inline" id="subscribe" role="form"> 

<h4 class="subscription-success"><i class="icon_check"></i> Thank you for requesting... </h4> 
<h4 class="subscription-error">Something Wrong!</h4> 

<select id="iam" name="usertype" class="form-control input-box"> 
<option data-placeholder = "Enter A username" selected value="A">Enter A account username</option> 
<option data-placeholder = "enter B email" value="B"> Enter B email </option> 
<option data-placeholder = "enter C email" value="C"> Enter C email </option> 
</select> 

<input type="email" name="email" id="subscriber-email" placeholder="Your Email" class="form-control input-box"> 

<button type="submit" name="submit" id="subscribe-button" class="btn btn-default standard-button">Submit</button> 

</form>

JS - 到目前爲止，只有檢測選擇和改變佔位符文本：

$('#iam').on('change', function() { 
var placeholder = $(this).find(':selected').data('placeholder'); 
    $('#subscriber-email').attr('placeholder', placeholder); 
});

PHP - 到目前爲止，只有驗證電子郵件和附加結果文件：

<?php 
// Note: filter_var() requires PHP >= 5.2.0 
if (isset($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { 

$selected_val = $_POST['usertype']; // Storing Selected Value In Variable 

$e_mail = $_POST['email'] . " - is a - " . $selected_val . " ," . "\n"; 
file_put_contents('email-list.txt', $e_mail, FILE_APPEND | LOCK_EX); 

} 
?>

來源

2015-06-03 SlurBeast

你想達到什麼樣的結果？我的意思是在JS或PHP？ – Viral

你究竟想要什麼？這是不清楚的。請明確說明？ –

我已經編輯了我的帖子，更清晰一點。 @anantkumarsingh – SlurBeast

隨着對JS和PHP構成的新手理解不多，我創建了3個輸入字段 - Name/Username/Email。對於類型A，需要用於提交的名稱和用戶名組合。對於B型& C，我需要提供名稱和電子郵件組合。因此，當從選項中選擇類型A並提交可見字段時，我會隱藏電子郵件字段。當選擇B或C類型時，我隱藏了用戶名字段並保持名稱和電子郵件字段可見並提交其內容。

來源

2015-06-22 02:04:23 SlurBeast

如果你想在php中驗證它，你需要做的就是將選項值設置爲y你想驗證而不是x，y並相應地處理它。如果你需要這些值（x和y），你可以將這些值設置爲一個格式，如x; email和y;電子郵件，將這些值分割成php並獲得原始值和驗證方法。

如果你希望在javascript中這樣做，它會變得更加棘手。這應該有助於您開始根據所選選項設置類型。正確的名稱和編號由您決定。

<html> 
    <head> 
     <Script> 
      function createInputField(e){ 
       var tS = (e || document.getElementById('inputFieldSelector')); //The type list 
       var tC = document.getElementById('inputFieldContainer'); //The field container we append our input to 

       if (tS && tC){ 
        while (tC.firstChild) tC.removeChild(tC.firstChild); //Empty the container 

        var tO = tS.options[tS.selectedIndex]; //Selected option 
        var tE = document.createElement('input'); //The dynamic input field 
        tE.id = 'inputField'; 
        tE.type = (tO.getAttribute('data-type') || 'text'); 
        tE.placeholder = tO.getAttribute('data-placeholder'); 
        tC.appendChild(tE); 
       } 
      } 

      function validateInputField(){ 
       var tE = document.getElementById('inputField'); 
       if (tE){ 
        if (tE.type == 'number' && (tE.value.trim() === '' || isNaN(tE.value))){ 
         alert('This is no number..'); 
         return false; 
        } 
        else if (tE.type == 'email' && tE.value.indexOf('@') === -1){ 
         alert('What email is that?'); 
         return false; 
        } 
       } 

       return true 
      } 
     </Script> 
    </head> 

    <body onload = 'createInputField()'> 
     <form onsubmit = 'return validateInputField()'> 
      <select id = 'inputFieldSelector' onchange = 'createInputField(this)'> 
       <option data-placeholder = 'Enter Text' data-type = 'text' value = 'Influencer'>Today I want text</option> 
       <option data-placeholder = 'Enter EMail' data-type = 'email' value = 'B'>I feel like entering an email</option> 
       <option data-placeholder = 'Enter Number' data-type = 'number' value = 'C'>How about a number?</option> 
      </select> 

      <div id = 'inputFieldContainer'> 
       <!--In here we are going to create the input field according to the selection.--> 
      </div> 

      <button type = 'submit'>Submit</button> 
     </form> 
    </body> 
</html>

來源

2015-06-03 07:22:13 Lain

通過HTML選擇器更改輸入驗證類型

回答

相關問題