How to valid form same name with multiple inputs? [closed]-CodePudding

For example i have a form like:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myclass" id="myid" method="post" action="otp.php">
<input type="text" class="form-control" name="code" maxlength="6">
<input type="submit" id="btnotp" class="btn btn-primary btn-block" value="Signin">
</form>

and now i wish to use 1 input separately

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myclass" id="myid" method="post" action="otp.php">
<input type="text" class="form-control" name="code" maxlength="1">
<input type="text" class="form-control" name="code" maxlength="1">
<input type="text" class="form-control" name="code" maxlength="1">
<input type="text" class="form-control" name="code" maxlength="1">
<input type="text" class="form-control" name="code" maxlength="1">
<input type="text" class="form-control" name="code" maxlength="1">
<input type="submit" id="btnotp" class="btn btn-primary btn-block" value="Signin">
</form>

How it validate the form when same name used in multiple input without modify php?

Looking jQuery solution.

CodePudding user response：

I'm not sure what you are really looking for but try this

$(document).ready(function(){
    //before we submit the form
    $('#myid').submit(function(e){
         //we create a variable that counts number of input fields
         var inputCount = $(this).children('input').length - 1;
         //then use for to loop through the fields searching for an empty field
         for (let x = 0; x < inputCount; x  ) {
             //if there's an empty field
             if($(this).children('.' x).val() == ''){
                 //we prevent the form from submitting
                 e.preventDefault();
                 //add a class to that field that will display that the input field is empty
                 $('.' x).addClass('no-value');
                 setInterval(() => {
                     //after three seconds, we remove that class
                     $('.' x).removeClass('no-value');
                 }, 3000);
                 return false;
             }
         }
    });
});

/*below we have a CSS rule that will display a red border to the input field that is empty... or you can implement something*/
.no-value{
     border: 2px solid red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myclass" id="myid" method="post" action="otp.php">
<!--be mindful of my incremented class names after `form-control`--> 
<input type="text" class="form-control 0" name="code" maxlength="1">
<input type="text" class="form-control 1" name="code" maxlength="1">
<input type="text" class="form-control 2" name="code" maxlength="1">
<input type="text" class="form-control 3" name="code" maxlength="1">
<input type="submit" id="btnotp" class="btn btn-primary btn-block" value="Signin">
</form>

Hopefully this is it.

CodePudding user response：

I'm not sure what you mean by valid the form but with vanilla JavaScript, you can just retrieve the values from the input boxes with duplicate names using the target event property after which you can validate those retrieved values accordingly.

Check and run the following Code Snippet to see how the duplicate name values are retrieved:

const form = document.querySelector('#myid');

form.addEventListener('submit', e => {
  e.preventDefault();
  console.log('First value to validate: '   e.target[0].value);
  console.log('Second value to validate: '   e.target[1].value);
  console.log('Third value to validate: '   e.target[2].value);
  console.log('Fourth value to validate: '   e.target[3].value);
  
  // validate the values according to what you want then submit form
  e.currentTarget.submit();
  
});

<form class="myclass" id="myid" method="post" action="otp.php">
<input type="text" class="form-control" name="code" maxlength="1">
<input type="text" class="form-control" name="code" maxlength="1">
<input type="text" class="form-control" name="code" maxlength="1">
<input type="text" class="form-control" name="code" maxlength="1">
<input type="submit" id="btnotp" class="btn btn-primary btn-block" value="Signin">
</form>