通过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选择器更改输入验证类型

回答

相关问题