在提交之前验证表单字段

时间:2016-02-26 03:07:56

标签: javascript forms validation

我有来自 frmvalidator 的这个函数,我用它来比较两个输入字段。问题是我有2个需要的字段,用户需要填写其中一个或两个,但不能将两个输入留空。

这是我一直在做的事情:

<form id="contact_form" action="contact.php" method="POST">
  <label>RFC ** </label>
  <input class="fiscal-input" type="text" name="rfc" placeholder="">
  <label> ó CURP **</label>
  <input class="fiscal-input" type="text" name="curp" placeholder="">
</form>

frmvalidator.addValidation("curp","regexp=^[A-Z]{1}[AEIOU]{1}[A-Z]{2}[0-9]{2}(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])[HM]{1}(AS|BC|BS|CC|CS|CH|CL|CM|DF|DG|GT|GR|HG|JC|MC|MN|MS|NT|NL|OC|PL|QT|QR|SP|SL|SR|TC|TS|TL|VZ|YN|ZS|NE)[B-DF-HJ-NP-TV-Z]{3}[0-9A-Z]{1}[0-9]{1}$","Por favor ingrese un CURP válido.");
frmvalidator.addValidation("rfc","regexp=^([A-Z,Ñ,&]{3,4}([0-9]{2})(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])[A-Z|\d]{3})$","Por favor ingrese un CURP válido.");

两个正则表达式只是将输入控制为某些字母数字。 我需要的是一个javascript函数,它允许填充一个或两个但不允许它们为空。

你们能指导我吗?

3 个答案:

答案 0 :(得分:0)

在我看来,这是一个非常简单的验证问题。 我在单击提交按钮时调用了验证功能。您也可以将此称为onblur。

<form id="contact_form" onsubmit="return validate();" action="contact.php" method="POST">

在验证功能中,完成以下操作

validate=function(){

alert("called");
x=document.getElementById("rfc").value;
y=document.getElementById("curp").value;
if(x==""&&y=="")
return false;
else
{
alert(x);
alert(y);
//Call your validation function here
return true;
}}

这是 DEMO

答案 1 :(得分:0)

您可以使用简单的表单提交处理程序来执行自定义验证。我在下面发布了一个示例代码。

document.getElementById( 'contact_form' ).addEventListener('submit', function(e) {
  var fields = document.querySelectorAll( '#contact_form .fiscal-input');
  var value = '';
  for( var i=0, len = fields.length; i<len; i++ ) {
    value = value || fields[i].value;
  }
  if(!value) {
    e.preventDefault();
  }
});

答案 2 :(得分:0)

正如您所说,您希望在表单提交之前验证表单字段,您可以执行以下操作

// fires every time this field changes
$('your_selector_of_element').on('change', function() {
    $(this).valid();                  // force a validation test on this field
});

这会在提交表单之前强制对元素进行验证,然后您将收到验证消息。