Проверка динамических полей выбора - PullRequest
Новая
       1

Проверка динамических полей выбора

0 голосов
/ 01 ноября 2019

Я строю динамическую форму, которая показывает несколько раскрывающихся списков на основе диапазона дат, выбранного в предыдущей форме. Я динамически называю выпадающие списки, такие как «time1», «time2» и т. Д. Однако я не уверен, как написать проверочный код, чтобы проверить, выбрано ли значение, поскольку элементы создаются «на лету».

Пример кода ниже: 

 <form method="post" action="quoteSave.php" id="step4Form">
 <?php
 while($counter<3){ //date range in days
 ?>
 <div class="form-group">
 <select required class="form-control" name="time<?php echo $counter ?>">
  <option value="1">Value 1</option>
 </select>
 </div>
 <?php } ?>
 <input type="submit">Submit</input>

Проверка: 

$('#step4Form').bootstrapValidator({

    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {

      //Not sure how to handle dynamic field names

    }


})

1 Ответ

0 голосов
/ 02 ноября 2019 

$(document).ready(function() {
  // I let this with gender so you can add other options as needed.
  var fields = {
    gender: {
      validators: {
        notEmpty: {
          message: 'The gender is required'
        }
      }
    }
  };
  var timeCount = $("select[name^='time']").length + 1;
  for (i = 1; i < timeCount; i++) {
    fields['time' + i] = {
      validators: {
        notEmpty: {
          message: 'The time is required'
        }
      }

    }
  }
  $('#registrationForm').bootstrapValidator({

    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: fields
  });
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.2.0/css/bootstrap.min.css" />

  <!-- Include FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.1.0/css/font-awesome.min.css" />

  <!-- BootstrapValidator CSS -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css" />

  <!-- jQuery and Bootstrap JS -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  <!-- BootstrapValidator JS -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"></script>

</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="page-header">
          <h2>Sign up</h2>
        </div>

        <form id="registrationForm" method="post" class="form-horizontal">

          <div class="form-group">
            <label class="col-sm-3 control-label">Gender</label>
            <div class="col-sm-5">
              <div class="radio">
                <label>
                                    <input type="radio" name="gender" value="male" /> Male
                                </label>
              </div>
              <div class="radio">
                <label>
                                    <input type="radio" name="gender" value="female" /> Female
                                </label>
              </div>
              <div class="radio">
                <label>
                                    <input type="radio" name="gender" value="other" /> Other
                                </label>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-3 control-label">Time1</label>
            <div class="col-sm-5">

              <label>
                                    <select name="time1">
                                       <option disabled selected value> -- select an option -- </option>
                                      <option value="1">Value 1</option>
                                  </select>
                                </label>

            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">Time2</label>
            <div class="col-sm-5">

              <label>
                                    <select name="time2">
                                       <option disabled selected value> -- select an option -- </option>
                                      <option value="1">Value 1</option>
                                  </select>
                                </label>

            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-9 col-sm-offset-3">
              <!-- Do NOT use name="submit" or id="submit" for the Submit button -->
              <button type="submit" class="btn btn-default">Sign up</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...