На jquery первый шаг js подтверждение адреса электронной почты и проверки имени - PullRequest
Новая
       29

На jquery первый шаг js подтверждение адреса электронной почты и проверки имени

0 голосов
/ 09 марта 2020

У меня есть 5 полей, я хочу проверить адрес электронной почты и имя на первом шаге и на всех других этапах, и каждый шаг пользователь проверяет поле с номером 3 di git.

То, что только на первом шаге он будет проверять электронную почту и имя, и другие измерения, которые являются 3 di git validation.

я имею в виду Как подтвердить адрес электронной почты в JavaScript этот вопрос, я просто хочу проверить имя email в первую очередь шаг. что я делаю не так. 

$(function() {
  $("#wizard").steps({
    headerTag: "h2",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "vertical",
    enableKeyNavigation: true,

    onStepChanging: function(event, currentIndex, newIndex) { 

      // always clear error message on click of 'next' and 'previous'
      clearErrorMessage('measureinput' + currentIndex);      

      // in case of 'next', newIndex is greater than currentIndex
      // so below condition will validate only in case of 'next', not 'previous'
      if (currentIndex < newIndex) {   
     return ValidateField('measurename' + currentIndex);
       return ValidateField('measuremail' + currentIndex);  
        return ValidateField('measureinput' + currentIndex);
      }
      else {
        return true;
      }
    },

    onFinishing: function(event, currentIndex) {      
      return ValidateField('measureinput' + currentIndex);
    },
    onFinished: function(event, currentIndex) {      
        $("#form")[0].submit();      
    }
  });

  function ValidateField(classNameOfField) {
 if(/^[a-zA-Z\s]+$/.test($("."+ + classNameOfField).val())){            
        return true;
    }
    else{               
        alert('Enter Name'); // you can write your own logic to warn users 
        return false;
    }
  if(/^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/.test($("."+ + classNameOfField).val())){            
        return true;
    }
    else{               
        alert('Enter Email!'); // you can write your own logic to warn users 
        return false;
    }
    var allFields = $("." + classNameOfField);
    for (i = 0; i < allFields.length; i++) {            
      if (/^[0-9]{1,3}$/.test(allFields[i].value)) {        
        return true;
      } else {
        //alert('Max 3 digits are allowed!'); // you can write your own logic to warn users 
        showErrorMessage(classNameOfField);
        return false;
      }
    }
  }

  function showErrorMessage(classNameOfField)
  {
    $("."+classNameOfField).css("border-color", "red");
    $("#errorMessage").css("display", "block");
  }

  function clearErrorMessage(classNameOfField)
  {
     $("."+classNameOfField).css("border-color", "black");
     $("#errorMessage").css("display", "none");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form id="form" name="form" method="post" action="mail/men-measure.php" class="measureinput-inner">
  <div class="content">

    <div id="wizard">
      <h2>Personal Detail</h2>
      <section class="tabs-continners">        
          <input type="name" class="measurename" placeholder="Enter Name" id="acrossfront" name="across-front"> 
          <input type="email" class="measureemail" placeholder="Enter Email" id="acrossfront" name="email">
      </section>
      <h2>Across Front</h2>
      <section class="tabs-continners">        
          <input type="text" class="measureinput0" placeholder="Enter Measurement In cm" id="acrossfront" name="across-front">          
      </section>

      <h2>Across Back</h2>
      <section class="tabs-continners">        
          <input type="text" class="measureinput1" placeholder="Enter Measurement in cm" id="across-back" name="across-back">          
      </section>

      <h2>Bundi Length</h2>
      <section class="tabs-continners">        
          <input type="text" class="measureinput2" placeholder="Enter Measurement in cm" id="bundi-length" name="bundi-length">
      </section>

      <h2>Bandhgala Length</h2>
      <section class="tabs-continners">        
          <input type="text" class="measureinput3" placeholder="Enter Measurement In cm" id="bandhgala-length" name="bandhgala-length" required>          
      </section>
<span id="errorMessage" style="display:none;color:red;"> Maximum 3 digits are allowed</span>
    </div>
  </div>
</form>

1 Ответ

1 голос
/ 12 марта 2020

В коде было 2 ошибки.

В HTML Коде у вас было className как measurename как measureemail, тогда как ваш JS добавлял currentIndex. Вы использовали ту же функцию для проверки имени, адреса электронной почты, ввода, вам необходимо отделить его и проверить, не возвращает ли какой-либо из них значение false.

Ниже приведен рабочий код, пожалуйста, проверьте.

HTML: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>


<form id="form" name="form" method="post" action="mail/men-measure.php" class="measureinput-inner">
  <div class="content">

    <div id="wizard">
      <h2>Personal Detail</h2>
      <section class="tabs-continners">        
          <input type="name" class="measurename" placeholder="Enter Name" id="acrossfront" name="across-front"> 
          <input type="email" class="measureemail" placeholder="Enter Email" id="acrossfront" name="email">
      </section>
      <h2>Across Front</h2>
      <section class="tabs-continners">        
          <input type="text" class="measureinput1" placeholder="Enter Measurement In cm" id="acrossfront" name="across-front">          
      </section>

      <h2>Across Back</h2>
      <section class="tabs-continners">        
          <input type="text" class="measureinput2" placeholder="Enter Measurement in cm" id="across-back" name="across-back">          
      </section>

      <h2>Bundi Length</h2>
      <section class="tabs-continners">        
          <input type="text" class="measureinput3" placeholder="Enter Measurement in cm" id="bundi-length" name="bundi-length">
      </section>

      <h2>Bandhgala Length</h2>
      <section class="tabs-continners">        
          <input type="text" class="measureinput4" placeholder="Enter Measurement In cm" id="bandhgala-length" name="bandhgala-length" required>          
      </section>
<span id="errorMessage" style="display:none;color:red;"> Maximum 3 digits are allowed</span>
    </div>
  </div>
</form>
</body>

JS: 

$(function() {
  $("#wizard").steps({
    headerTag: "h2",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "vertical",
    enableKeyNavigation: true,

    onStepChanging: function(event, currentIndex, newIndex) { 

      // always clear error message on click of 'next' and 'previous'
      clearErrorMessage('measureinput' + currentIndex);      

      // in case of 'next', newIndex is greater than currentIndex
      // so below condition will validate only in case of 'next', not 'previous'
      if (currentIndex < newIndex) {   
            return validateName('measurename') & validateEmail('measureemail') & ValidateField('measureinput' + currentIndex);
      }
      else {
        return true;
      }
    },

    onFinishing: function(event, currentIndex) {      
      return ValidateField('measureinput' + currentIndex);
    },
    onFinished: function(event, currentIndex) {      
        $("#form")[0].submit();      
    }
  });

    function validateName(classNameOfField) {
    if($("."+ classNameOfField).val() !== "" && /^[a-zA-Z\s]+$/.test($("."+ classNameOfField).val())){            
        return true;
    }
    else{               
        alert('Enter Name'); // you can write your own logic to warn users 
        return false;
    }
  }

  function validateEmail(classNameOfField) {
     if(/^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/.test($("."+ classNameOfField).val())){            
        return true;
    }
    else{               
            console.log("Wrong")
        alert('Enter Email!'); // you can write your own logic to warn users 
        return false;
    }
  }
  function ValidateField(classNameOfField) {
    var allFields = $("." + classNameOfField);
    for (i = 0; i < allFields.length; i++) {            
      if (/^[0-9]{1,3}$/.test(allFields[i].value)) {        
        return true;
      } else {
        //alert('Max 3 digits are allowed!'); // you can write your own logic to warn users 
        showErrorMessage(classNameOfField);
        return false;
      }
    }
    return true;
  }

  function showErrorMessage(classNameOfField)
  {
    $("."+classNameOfField).css("border-color", "red");
    $("#errorMessage").css("display", "block");
  }

  function clearErrorMessage(classNameOfField)
  {
     $("."+classNameOfField).css("border-color", "black");
     $("#errorMessage").css("display", "none");
  }
});
...