Question

您好，我正在验证键盘输入以及单击“提交”按钮时的输入字段。

我不使用输入类型Submit，因为我不想在提交表单后重新加载页面。

条件是当输入为空或值错误时，将显示错误消息。在启动键盘时，它工作正常，但在单击时未触发

//Validation
function validate(field) {
  var value = field.val();
  var to_label = field.parent().find('label');
  var error = false;
  var error_message = '';

  to_label.find('span').remove();

  if (field.hasClass('validate-field') && value == '') {
    error = true;
    document.getElementById("name").style.borderBottom = "1px solid #ff0000";
    document.getElementById("email").style.borderBottom = "1px solid #ff0000";
  } else if (field.hasClass('valid-name') && valid_name(value) == false) {
    error = true;
    error_message = 'Name must consist characters only';
    document.getElementById("name").style.borderBottom = "1px solid #ff0000";
  } else if (field.hasClass('valid-mail') && valid_email(value) == false) {
    error = true;
    error_message = 'Invalid Email';
    document.getElementById("email").style.borderBottom = "1px solid #ff0000";
  };

  if (error == true) {
    to_label.append('<span>' + error_message + '</span>');
  }
}
$('.validate-field').on('keyup', function() {
  validate($(this));
});
$('#contact-us-form').click(function() {
  var field = $(this).find('.validate-field');
  validate(field);
});

function valid_name(value) {
  var valid = /^([a-zA-Z_\.\-\+])+$/;
  return valid.test(value);
}

function valid_email(value) {
  var valid = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return valid.test(value);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="name" class="field validate-field valid-name input-name" name="name" type="text" />
<label class="error-label" for="name"></label>
<input id="email" type="text" name="email" value="" id="email" class="field validate-field valid-mail" />
<label class="error-label" for="email"></label>

<a id="contact-us-form" class="btn-submit">Send</a>

任何人都可以在这里帮助我，如何使它在单击时也能正常工作？

谢谢。

Answer 1

您的点击侦听器位于按钮上：

$('#contact-us-form').click(function(){
    var field = $('.validate-field'); // <---- HERE is the change.
    validate( field );
});

执行$(element).find时，您会在$（element）中寻找元素。

Answer 2

@Zain，在发生Keyup事件时起作用，因为您一次仅验证一个元素，而在单击“按钮”时，您具有多个字段，因此您必须遍历以下循环。当您获得所有带有类'.validate-field'的元素

 $('#contact-us-form').click(function(){
        var field = $('.validate-field');
    $.each(field,function(index,element){
    // You can add more logic for break look if form is invalid at first element.
        validate( $(element));
    //break;
    }

});

点击表单验证不起作用的javascript

2 个答案: