如果正则表达式在使用jQuery的handsontable内部无效，则禁用Button

Question

i need to validate three fields here First Name , Last Name , & Email only if these values are valid or if all fields are empty it should show **Next** button. All these Target Column values are coming from Api.

First Name & Last Name should accept only alphabets Email should be asusual in Email format

dataObject.forEach(function (item) {
   var regex = /^[0-9]+$/;                        
   var emailReg = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/;

if (item.TargetColumn == "First Name" && item.DefaultValue.match(regex)) {
         $('#importNext').css({ 'display':'none'});
         alert("First Name is not valid")                           
         } else if (item.TargetColumn == "First Name" && item.DefaultValue == ""){
            console.log("Success");
            $('#importNext').css({ 'display': 'block' });
     }

   if (item.TargetColumn == "Last Name" && item.DefaultValue.match(regex)) {
         $('#importNext').css({ 'display':'none'});
         alert("Last Name is not valid")                           
         } else if (item.TargetColumn == "Last Name" && item.DefaultValue == ""){
            console.log("Success");
            $('#importNext').css({ 'display': 'block' });
     }

   if (item.TargetColumn == "Email" && !item.DefaultValue.match(emailReg)) {
         $('#importNext').css({ 'display':'none'});
         alert("Email is not valid")                           
         } else if (item.TargetColumn == "Email" && item.DefaultValue == ""){
            console.log("Success");
            $('#importNext').css({ 'display': 'block' });
     }
)};

I had tried above method but button is still visible

Answer 1

Hope it will helps you.

 var fields = ["First_Name", "Last_Name", "Location", "Email", "Experience", "ID"]; var fields_data = {}; $(document).ready(function() { var html = ""; fields.forEach(function(field){ html += "<tr>"; html += "<td style='text-align:right;'>"+field+":</td>"; html += "<td><input type='text' class='tableFields' data-field='"+field+"'></td>"; html += "</tr>"; }); html += "<tr>"; html += "<td></td>" html += "<td style='text-align:center;'><button id='next-button'>Next</button></td>"; html += "</tr>"; $("#form-table").html(html); var err = 0; $("#form-table").on('change', '.tableFields', function(e){ var field = $(this).data('field'); var value = $(this).val(); fields_data[field] = value; var text_space_regex = /^[a-zA-Z\\s]*$/; var email_regex = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/; switch(field){ case 'First_Name': case 'Last_Name': if(value && !text_space_regex.test(value)){ alert(field+" should accept only text!"); err++; }else{ err -= (err===0) ? 0 : 1; } break; case 'Email': if(value && !email_regex.test(value)){ alert(field+" is invalid!"); err++; }else{ err -= (err===0) ? 0 : 1; } break; } if(err > 0){ $("#next-button").hide(); }else{ $("#next-button").show(); } }); $("#form-table").on('click', '#next-button', function(e){ alert("success! (look at console for data)"); console.log(fields_data); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="margin-top:25px;"> <table id="form-table"></table> </div>