Кнопка Отключить, если регулярное выражение недопустимо в handsontable с использованием jQuery - PullRequest
Новая
       17

Кнопка Отключить, если регулярное выражение недопустимо в handsontable с использованием jQuery

0 голосов
/ 28 марта 2019

enter image description here

Мне нужно проверить три поля здесь Имя, Фамилия и Электронная почта , только если эти значения действительны или если все поля пусты, должна отображаться кнопка **Next**. Все эти значения целевого столбца получены из API.

Имя и Фамилия должны принимать только буквы алфавита Электронная почта должна быть обычной в формате электронной почты 

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' });
     }
)};

Я пробовал описанный выше метод, но кнопка все еще видна

1 Ответ

1 голос
/ 04 апреля 2019

Надеюсь, это поможет вам. 

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>
...