Question

我有一个包含多个电子邮件字段的表单，因此此电子邮件要在数据库中提交，但在此之前应进行验证以避免重复（通过单击表单中显示的添加更多按钮生成的多个电子邮件字段）。

我编写了ValidateEmail脚本以避免重复，但是该脚本仅适用于一个电子邮件字段，而不适用于多个电子邮件字段。

问题： 1）如果我们在第一个字段中输入电子邮件ID，它将进行验证并检查电子邮件是否存在。如果不存在，则禁用提交按钮。

2）如果我们在第二个字段中键入电子邮件ID，并且在验证后返回的电子邮件不存在，则它将启用“提交”按钮，但是在第一个电子邮件字段中包含重复的电子邮件。

3）如果所有电子邮件字段都不包含重复值，则仅启用提交按钮，否则应保持禁用状态。

<form>
<div>
<input type="email" name="email[]" class="email" onblur="validate_email(this)" />   // initially single filed

// This additional email fields created when click on add more button 

<input type="email" name="email[]" class="email" onblur="validate_email(this)" /> 
<input type="email" name="email[]" class="email" onblur="validate_email(this)" />
<input type="email" name="email[]" class="email" onblur="validate_email(this)" />
</div>

<button class="add_more">Add more</button>   // this will append extra email fileds
</form>

<script>
// This is the script it will check whether email already exist or not
function ValidateEmail(data) {
        var email_id = data.value;
        $.ajax({
            type: "POST",
            url: "<?= base_url('controller') ?>",
            data:{
               email_id:email_id 
            },
            dataType: 'json',
            success: function (response) {
                if(response.exist){
                       // disable submit button and show error

                    }
                     else{
                      //enable submit field and hide error

                        }
            },
            error: function (jqXHR, textStatus, errorMessage) {
                console.log(errorMessage); // Optional
            }
        });
    }

</script>

Answer 1

如果为此使用jQuery，则可以将事件委托用于动态插入/删除的元素。到目前为止，这些将是电子邮件输入。

基本上，这里的想法是：

获取上次更改/模糊输入元素的值。
验证服务器端的现有电子邮件（异步检查）
浏览当前可用的电子邮件输入，然后在步骤（1）中验证每个值并将其与“当前电子邮件”进行匹配。
如果找到，请在现有电子邮件字段中添加一个error类
否则，将valid类添加到现有电子邮件字段中

您不需要传递onblur="validate_email(this)"，这可以在jquery中完成。

const data = [
  'allan@user.com',
  'john@user.com',
  'ronaldo@user.com',
  'sony@user.com',
  'victor@user.com',
  'matt@user.com',
]

function isEmail(email) {
  // eslint-disable-next-line no-useless-escape
  return RegExp(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i).test(email);
};

function asyncEmailValidate(email) {
  return new Promise(function(resolve, reject) {
    if (data.includes(email))
       return reject('Found duplicated')
    
    return resolve(true);
  })
}

$(document).ready(function() {
  $(document)
    .on('blur',"input.email", function(e) {
      // Current email input
      var currentEmail = e.target.value,
          $emailNode = $(this),
          isValid = true;
    
      // Validate email
      if (!isEmail(currentEmail))
        return;
    
      // Validate email on server side first,
      // If found no existing email, then check 
      // siblings email for duplicates
      var serverResult = asyncEmailValidate(currentEmail);
      
      serverResult
        .then(function(result) {
          // There's no existing email with the inputed email. Now
          // look up on other available email inputs fields, except
          // the current one, and validate with the current email value
          var siblingsEmailInputs = $("input.email").not($emailNode);

          if (!siblingsEmailInputs)
            return;

          if (siblingsEmailInputs.length > 0) {
            siblingsEmailInputs.each(function(index) {
              console.log('input : ', $(this).val())
              
              if ($(this).val() !== "" && $(this).val() === currentEmail) {
                 isValid = false;
              }
            });
          }
          
          // Finally update the state for the current field
          if (isValid) {
            $emailNode.addClass('is-valid');
          } else $emailNode.addClass('is-error');
        })
        .catch(function(error) {
          $emailNode.addClass('is-error');
          console.log('error:', error);
        })
    });
  
})

.email.is-error {
   border: 1px solid red;
}

.email.is-valid {
  border: 1px solid green;
}

.email {
  width: 300px;
  margin: 5px;
  height: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre>
const data = [
  'allan@user.com',
  'john@user.com',
  'ronaldo@user.com',
  'sony@user.com',
  'victor@user.com',
  'matt@user.com',
]
</pre>

<div>
<input type="email" name="email[]" class="email" /> 
</div>
  <div>
    <input type="email" name="email[]" class="email" /> 
</div>
    <div> 
      <input type="email" name="email[]" class="email" />
</div>
<div>
<input type="email" name="email[]" class="email" />
</div>

这些只是您处理电子邮件验证和重复电子邮件的基本方法。我认为您可以从这里开始研究提交逻辑。

一个简短的说明，您应该将ajax提交过程留在一个单独的函数中，而不要与验证过程混淆，这样会更清楚。

希望获得帮助

链接工作示例：https://codepen.io/DieByMacro/pen/jOOdWMr

已更新： -我已经有一段时间没有在jQuery中使用ajax了，所以我不确定语法是否正确，因此我将其替换为Promised调用，该调用的工作方式与您发出异步请求相同。您可以按照更新的版本进行参考。

使用Javascript

1 个答案: