Question

我有一个按钮，单击后会显示下拉菜单+文本框。

如果选择默认值，我需要验证下拉列表。

ie）如果在下拉菜单具有默认值时单击按钮，则我应该无法添加下拉菜单。

设计：

第二个下拉菜单具有默认值，但我仍然可以添加另一个dd。

该代码仅在第1个dd工作。

<div class="fields_action"><br>
  <select id="action" class="increment" onchange="validateOnSelect(this)" style="position: relative;bottom: 32px;">
    <option value="N">Select Action</option>
    <option value="Y">SMS</option>
    <option value="Y">Call</option>
    <option value="Y">Call Back</option>
    <option value="Y">Email</option>
    <option value="Y">Website </option>
  </select>
  <input name="default_text" id="default_text_id" value="" type="text" style="position: relative;bottom: 32px;"><br/>
  <span style="color:red;" class="key-error-class"  id="key_error_1" ></span>
  <span id="valueResponse_1" class="valueResponse-class"></span>
</div>

JS：

$(document).ready(function() {
  document.getElementById("default_text_id").disabled = true;
  var add_button = $("#btnAdd"); //Add button ID
  var x = 1; //initlal text box count
  $(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    var actionid = $('#action');
    if ($("#action")[0].selectedIndex <= 0) {
      alert("Please select");
    }
    if (actionid.val() === '' || actionid.val() === 'N') {
      alert("Please select an item from the list and then proceed!");
      $('#action').focus();
      return false;
    }
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div><select id="action" class="increment" required><option value="N">Select Action</option><option value="Y">Call</option><option value="Y">Call Back</option><option value="Y">Email</option><option value="Y">Website </option></select> &nbsp;&nbsp; <input name="TextAdPriority" class="" value="" type="text"><a href="#" class="remove_field">Remove</a><br/><br/></div>');
        if ($("#action")[0].selectedIndex <= 0) {
            alert("Please select");
        }
    }
  });
});

Answer 1

您可以像这样修改代码以验证下拉菜单。它对我来说是正确的。

已更新代码以进行输入验证。

在html中修改的选项值。

添加了validate_input函数，用于基于不同的下拉值来验证输入。

HTML

 <div class="fields_action"><br>
  <div class="fields">
    <select id="action" class="increment" style="position: relative;bottom: 32px;">
        <option value="N">Select Action</option>
        <option value="sms">SMS</option>
        <option value="call">Call</option>
        <option value="callback">Call Back</option>
        <option value="email">Email</option>
        <option value="website">Website </option>
     </select><br/>
       <input name="default_text" id="default_text_id" value="" type="text" style="position: relative;bottom: 32px;"><br/>
  </div>
</div

Js

 $(add_button).click(function(e){ //on add input button click
 //alert('asas');
  e.preventDefault();

  var fields = $('.fields');
  var isValid = true

  fields.map(function(idx, field) {
   var select = $(field).find('select');
   var input = $(field).find('input');
   if (select.val() === '' || select.val() === 'N' || input.val() === '') {
    alert(`Please fill all details on position ${idx+1} and then proceed!`);

    select.val() === '' || select.val() === 'N' ? select.focus() : input.focus();

    isValid = false;
   } else {
     isValid = validate_input(select.val(), input);
   }
 })

 if(isValid && x < max_fields){ //max input box allowed
   x++; //text box increment
   $(wrapper).append('<div class="fields"><select id="action" class="increment" required><option value="N">Select Action</option><option value="Y">Call</option><option value="Y">Call Back</option><option value="Y">Email</option><option value="Y">Website </option></select> &nbsp;&nbsp; <input name="TextAdPriority" class="" value="" type="text"><a href="#" class="remove_field">Remove</a><br/><br/></div>');
 }

});

function validate_input(selectVal, input) {
 switch(selectVal) {
  case 'sms':
   //your validation
  case 'call':
   //your validation
  case 'callback':
   //your validation
  case 'email':
   var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
   var valid = regex.test(input.val());
   if(!valid) 
    { 
     alert("invalid email")
     input.focus();
    }
    return valid;
  case 'website':
   //your validation
  default:
  return true;
}

}

jQuery验证带有文本框的动态下拉列表的默认值

1 个答案: