Question

我确实需要创建一个表单。在那种形式中，我需要逐个启用表单元素。这意味着，如果用户向第一个元素输入了有效数据，那么我想自动对焦下一个元素，依此类推。

注意：当页面加载时，我希望除第一个元素外，禁用所有元素。

这是我的表单的HTML。

<form role="form" class="banner" method="post" action=""> 

  <div class="form-group">
    <div class="icon-addon addon-md">
      <input type="text" name="name" placeholder="Your Name" class="form-control first-name sequence" autocomplete="off" required>
      <label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
    </div>
  </div>

  <div class="form-group">
    <div class="icon-addon addon-md">
      <input type="email" name="email" placeholder="Your Email" class="form-control email_address sequence" autocomplete="off" disabled required>
      <label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
      <span class="email-error"></span>
    </div>
  </div>

  <div class="form-group">
    <div class="icon-addon addon-md">
      <input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
      <label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
    </div>
  </div>                      

  <div class="element-left">
    <div class="form-group">
      <div class="icon-addon addon-md">
        <input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off">
        <label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
      </div>
    </div>  
  </div>

  <div class="element-right">
    <div class="form-group">
      <div class="icon-addon addon-md">
        <input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off">
        <label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
      </div>
    </div> 
  </div> 

  <p class="form-actions">
    <button type="submit" name="submit" class="btn btn-default btn-block">
      <span class="btn-orange-inner">Send</span>
    </button>
  </p>
</form>

这是我在jQuery中尝试的方式：

// form validation 
function fakeValidator(event) {
  var flag = false;    
  var $element = $(event.target);
  var values = $element.val();

  if (values.length >= 3) {  

    if($element.hasClass('email_address')) {
      if(validemail(values)){              
        flag = true ;
      }else{        
        flag =false;
      }
    }
    flag =true;     
  } else {        
    flag =false;
  }

  if(flag){ 
    //alert('hi');
    $element.addClass('valid');
    enableNextElement(event);     
  } else{
    alert('hi el');
    $element.removeClass('valid');
    //$element.addAttr('disabled');
  }
}

function validemail(value){
  var emailReg ="/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/";
}

function enableNextElement(event) {
  var $element = $(event.target);
  if ($element.hasClass('valid')) {
      $element.closest('.form-group')
          .next('.form-group')
          .find('.sequence')
          .removeAttr('disabled');
  }
}

$('.sequence').on('blur keyup', fakeValidator);

但我的问题是，如果我输入了无效的电子邮件，则下一个元素正在启用。但是如果它是电子邮件字段中的有效电子邮件，我想启用下一个元素。

有人可以告诉我这有什么问题吗？谢谢。

Answer 1

2件事：

您应该通过电子邮件验证功能#include <iostream> #include <map> #include <stack> enum Symbols { TS_L_PARENS, TS_R_PARENS, TS_A, TS_PLUS, TS_EOS, TS_INVALID, NTS_S, NTS_F }; enum Symbols lexer(char c) { switch(c) { case '(': return TS_L_PARENS; case ')': return TS_R_PARENS; case 'a': return TS_A; case '+': return TS_PLUS; case '\0': return TS_EOS; default: return TS_INVALID; } } int main(int argc, char **argv) { using namespace std; if (argc < 2) { cout << **"usage:\n\tll '(a+a)'"** << endl; return 0; } map< enum Symbols, map<enum Symbols, int> > table; stack<enum Symbols> ss; // symbol stack char *p; // input buffer ss.push(TS_EOS); // terminal, $ ss.push(NTS_S); // non-terminal, S p = &argv[1][0]; table[NTS_S][TS_L_PARENS] = 2; table[NTS_S][TS_A] = 1; table[NTS_F][TS_A] = 3; while(ss.size() > 0) { if(lexer(*p) == ss.top()) { cout << "Matched symbols: " << lexer(*p) << endl; p++; ss.pop(); } else { cout << "Rule " << table[ss.top()][lexer(*p)] << endl; switch(table[ss.top()][lexer(*p)]) { case 1: // 1. S → F ss.pop(); ss.push(NTS_F); // F break; case 2: // 2. S → ( S + F ) ss.pop(); ss.push(TS_R_PARENS); // ) ss.push(NTS_F); // F ss.push(TS_PLUS); // + ss.push(NTS_S); // S ss.push(TS_L_PARENS); // ( break; case 3: // 3. F → a ss.pop(); ss.push(TS_A); // a break; default: cout << "parsing table defaulted" << endl; return 0; break; } } } cout << "finished parsing" << endl; return 0; }或return true，即false

您的validemail存储为字符串，因此您无法对其应用regex功能。取消将其包裹在test
中

上述更改将为您提供所需的结果。

" "

<强>更新

<强> DEMO

它仍会启用function validemail(value){ var emailReg =/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; //regex return emailReg.test(value); //use test which returns true or false }，因为您以phonenumber编写了这样的内容。

您的验证：

validation

我的解决方法

if (values.length >= 3) {  
   //this is ok for name
   if($element.hasClass('email_address')) {
        if(validemail(values)){              
            flag = true;
        }else{        
            flag =false;//even though flag is false here
        }
   }
   flag =true; //when it comes to this line it again makes it to true
   //and for email along with length>3, valid email address has also to be validated
} else {        
    flag =false;
}

使用previous的值启用下一个表单元素

1 个答案: