Как проверить только число до 3 цифр на каждом шаге с помощью jquery-step

Привет, пытаюсь сделать пошаговую форму измерения тела, используя jquery stepjs https://github.com/rstaib/jquery-steps/ мой код отправляет данные по окончании, но нужна помощь в проверке поля, которое должно состоять максимум из 3-значного числа, которое является измерением перед нажатием следующей кнопки

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


            <section class="tabs-continners">
    <input type="text" class="measureinput" placeholder="Enter Measurement In cm" id="bandhgala-length" name="bandhgala-length">
    </section>

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

            <section class="tabs-continners">
        <input type="text" class="measureinput" placeholder="Enter Measurement In cm" id="fly" name="fly" >
    </section>
      </div>
 </div>

My Script

   <script src="js/jquery.steps.js"></script>

   <script>
   $(function ()
   {
      $("#wizard").steps({
        headerTag: "h2",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        stepsOrientation: "vertical",
              onFinished: function (event, currentIndex) {
       $("#form")[0].submit();
       }
    });

   });
   </script>

jquery jquery-steps
person Junaid Khan    schedule 03.03.2020    source источник
comment
Я отредактировал свой ответ, чтобы добавить небольшую функциональность для отображения сообщения об ошибке. Взглянуть.   -  person as-if-i-code    schedule 06.03.2020

Ответы (1)


arrow_upward
1
arrow_downward

Используйте регулярное выражение для проверки количества цифр. Вам потребуются дополнительные параметры onStepChanging и onFinishing для steps().

Регулярное выражение /^[0-9]{1,3}$/ позволит использовать только до 3 цифр, например. 1, 12, 123 будут разрешены, но не 1234 и так далее. Вы можете написать свою собственную логику, чтобы предупредить пользователя о необходимости ввести не более 3 цифр (например, текст красного цвета).
Примечание. Это регулярное выражение не допускает пустого значения. Чтобы разрешить пустое значение, измените регулярное выражение как /^[0-9]{0,3}$/

EDIT:
У вас есть 4 шага, и каждый шаг имеет один вход, поэтому нам нужно проверить <input>, который виден на текущем шаге. Поэтому я добавил индекс текущего шага (currentIndex в скрипте) в качестве суффикса к классу measureinput. Вы можете заметить measureinput0, measureinput1, measureinput2, measureinput3 занятий для <input> в каждом <section>.

Теперь мы можем проверить только текущие видимые <input> в JavaScript.

$(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('measureinput' + currentIndex);
      }
      else {
        return true;
      }
    },

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

  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;
      }
    }
  }
  
  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="measureinput0" placeholder="Enter Name" id="acrossfront" name="across-front"> 
          <input type="email" class="measureinput0" 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>

person as-if-i-code    schedule 03.03.2020
comment
Комментарии не для расширенного обсуждения; этот разговор был перешел в чат. - person Samuel Liew♦; 06.03.2020
comment
@JunaidKhan Добавьте другой класс для имени и электронной почты и проверьте его внутри функции ValidateField(). - person as-if-i-code; 06.03.2020