проверка электронной почты и проверка через запятую jQuery коды работают правильно при разделении, но не при смешивании для отключения кнопки отправки - PullRequest
Новая
       19

проверка электронной почты и проверка через запятую jQuery коды работают правильно при разделении, но не при смешивании для отключения кнопки отправки

0 голосов
/ 17 июня 2020
• 1000 Однако, когда я пишу правильный ввод, разделенный запятыми, в поле ввода, он по-прежнему позволяет мне нажимать кнопку отправки, что странно, потому что электронное письмо пустое, и я ожидаю, что кнопка отправки останется отключенной. Каждая из этих двух функций работает правильно по отдельности. 
$("#category_names").on('keyup', function (event) {
    $(".error").hide();
    let hasError = false;

    let isValid = true;
    $('#category_names').each(function() {
        if (($.trim($(this).val()).indexOf(",") == -1)) {
            //alert('Please separate multiple keywords with a comma.');
            $('#commaerror').show();
            hasError = true;
        } else {
            $('#commaerror').hide()
            hasError = false;
        }
    });
    $('button[type="submit"]').prop('disabled', hasError);


})


$("#email").on('keyup', function() {
    $(".error").hide();
    let hasError = false;

    let emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    let emailAddressVal = $(this).val();
    if (emailAddressVal == '') {
        $("#email").after('<span class="error">Please enter your email address.</span>');
        hasError = true;
    }
    else if (!emailReg.test(emailAddressVal)) {
        $("#email").after('<span class="error">Enter a valid email address.</span>');
        hasError = true;
    }

    $('button[type="submit"]').prop('disabled', hasError);
})

1 Ответ

1 голос
/ 17 июня 2020

Вам необходимо проверить оба (все, если есть и другие входы) условия действительны в каждом обработчике событий. Вероятно, проще всего поместить весь код проверки в функцию и вызвать ее в обработчике событий. Например: 

function validate() {
  $(".error, #commaerror").hide();
  let hasError = false;

  // validate category names
  $('#category_names').each(function() {
    if ($(this).val().indexOf(",") == -1) {
      //alert('Please separate multiple keywords with a comma.');
      $('#commaerror').show();
      hasError = true;
    }
  });
  // validate email
  let emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  let emailAddressVal = $('#email').val();
  if (emailAddressVal == '') {
    $("#email").after('<span class="error">Please enter your email address.</span>');
    hasError = true;
  } 
  else if (!emailReg.test(emailAddressVal)) {
    $("#email").after('<span class="error">Enter a valid email address.</span>');
    hasError = true;
  }
  
  return hasError;
}

$("#category_names, #email").on('keyup', function(event) {
  $('button[type="submit"]').prop('disabled', validate());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
  <label data-error="wrong" data-success="right">Enter your email</label>
  <input type="email" class="form-control validate purple-border" id="email">
  <br/>
  <label>Enter categories:</label>
  <input type="text" id="category_names" />
  <br/>
</div>
<button type="submit" class="btn btn-purple purple-border" disabled="disabled">Perform Frame Classification</button>

Примечание. Я немного очистил ваш код category_names, но вам нужно добавить дополнительную проверку, чтобы, если есть только одно значение, оно все равно проходило , или что-то вроде abc, не проходит. Вы можете найти что-то вроде 

$(this).val().match(/^\s*\w+(\s*,\s*\w+)*\s*$/)

более полезным.

...