JQuery как фреймворк Laravel эвакуатор валидации форм на разных эвакуаторы краны начальной загрузки на стр.


JQuery как фреймворк Laravel эвакуатор валидации форм на разных эвакуаторы краны начальной загрузки на стр.

24.10.2020 03:21:28 Просмотров 48 Источник

У меня ЕСТЬ Буксировочные краны bootstrap, каждый из которых имеет разную форму, например, как я могу проверить их индивидуально ..:

<div class="tab-content">
 <div id="Drinks" class="container tab-pane active"><br>
   <div class="col-md-12 pl-0">
    <form method="POST" id="validFormCoffeeDrinks" action="{{ route('salesAddDrinks.product') }}" >
    @csrf
    <div class="form-group">
     <div class="form-row">
      <div class="col-md-10" role="alert">
       <select name="category_salesCoffeeDrinks" id="category_salesCoffeeDrinks" class="form-control">
         <option value="0">{{ __('messages.Select Category') }}</option>
       </select>
      </div>
     </div>
    </div>
    <div class="form-group">
     <div class="form-row">
      <div id="container_template_Drinks" class="col-md-10">
       // many checkbooks 
       <input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="{{$item->id}}" 
       {{$item->quantity == 0 ? 'disabled' : ''}} >
      </div>
     </div>
    </div>
    <div class="form-row">
     <div class="col-md-6 text-left">
      <button type="submit" name="drinks_submit" class="btn btn-dark btn-sm mt-2">Submit</button>                                    
     </div>
    </div>
    </form>
   </div>
  </div>
  <div id="BarcodeProducts" class="container tab-pane fade"><br>
   <div class="col-md-12 pl-0">
    <form method="POST" id="validFormCoffee" action="{{ route('salesAdd.product') }}">
    @csrf
    <div class="form-group">
     <div class="form-row">
      <div class="col-md-10">
       <select name="category_salesCoffee" id="category_salesCoffee" class="form-control">
        <option value="0">{{ __('messages.Select Category') }}</option>
          @if(count($category)>0)
          @foreach ($category as $item)
            <option value={{$item->id}}> | {{$item->name}} |</option>
          @endforeach
          @else
          <option value="0">{{ __('messages.no_category') }} </option>
          @endif
      </select>
     </div>
    </div>
   </div>
   <div class="form-group">
    <div class="form-row">
     <div id="container_template_BarcodeProducts" class="col-md-10">
       // many checkbooks 
       <input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="{{$item->id}}" 
       {{$item->quantity == 0 ? 'disabled' : ''}} >
     </div>
    </div>
   </div>
   <div class="form-row">
    <div class="col-md-6 text-left">
     <button type="submit" name="BarcodeProducts_submit" class="btn btn-dark btn-sm ">submit</button>
    </div>
  </div>
 </form>
 </div>
</div>
</div>

в javascript проверка jquery:

$('form#validFormCoffeeDrinks').on('submit', function (event) {
 var category_id = $('#category_salesCoffeeDrinks').val();
 if (category_id == 0) {
 alert("Choose a Category First.");
 return false;
 }
 if (!$('input[type=checkbox]').is(":checked")) {
 alert("Choose a Product First.");
 return false;
 } else {
   var out = true;
   $('input[type=checkbox]').each(function () {
    if ($(this).is(":checked")) {
      product_name = $(this).parent().siblings('td#product_name').text();
      if (!$(this).parent().siblings('td').find('input[type=number]').val()) {
      alert("Choose Quantity for Product " + product_name );
      out = false;
      return false;
    }
   }
  });
  if (out == false)
   return false;
  }
});

$('form#validFormCoffee').on('submit', function (event) {
 if (!$('input[type=checkbox]').is(":checked")) {
  alert("Choose a Product First.");
  return false;
 } else {
   var out = true;
   $('input[type=checkbox]').each(function () {
    if ($(this).is(":checked")) {
     product_name = $(this).parent().siblings('td#product_name').text();
      if (!$(this).parent().siblings('td').find('input[type=number]').val()) {
        alert("Choose Quantity for Product " + product_name );
        out = false;
        return false;
      }
      if (!$(this).parent().siblings('td').find('input[type=text]').val()) {
       alert("Choose Unit Price for Product " + product_name);
       out = false;
       return false;
      }
      if (!Number($(this).parent().siblings('td').find('input[type=text]').val())) {
       alert("Unit Price must be Number for Product " + product_name);
       out = false;
       return false;
      } else {
      var cost = $(this).parent().siblings('td').find('input[id=hidden_cost_' + $(this).val() + 
 ']').val();
      if ($(this).parent().siblings('td').find('input[type=text]').val() <= parseInt(cost)) {
       alert("Unit Price must be grater than " + cost + " for Product " + product_name);
       out = false;
       return false;
      }
     }
    }
   });
   if (out == false)
    return false;
   }
  });

моя проблема заключается в том что если вы установите флажок на первой форме и нажмете отправить во второй форме проверка происходит в первой форме и наоборот происходит во второй форме

У вопроса есть решение - Посмотреть?

Ответы - JQuery как фреймворк Laravel эвакуатор валидации форм на разных эвакуаторы краны начальной загрузки на стр. / Laravel jQuery validation tow forms on different tow taps bootstrap in on page

Является ответом!
Swati

24.10.2020 04:48:13

Ваш текущий код jquery использует input[type=checkbox] в качестве селектора, поэтому всякий раз, когда вызывается какое-либо событие отправки форм, он также проверяет все другие флажки, которых нет внутри вашей формы .Один из способов избежать этого-использовать либо идентификатор forms, либо идентификатор или div, где все флажки расположены для определенных вкладок, в качестве селектора с флажками, например : $('#container_template_Drinks input[type=checkbox]')...

Демонстрационный Код :

$('form#validFormCoffeeDrinks').on('submit', function(event) {
  var category_id = $('#category_salesCoffeeDrinks').val();
  if (category_id == 0) {
    alert("Choose a Category First.");
    return false;
  }
  //check inside container..div checkboxes
  if (!$('#container_template_Drinks input[type=checkbox]').is(":checked")) {
    alert("Choose a Product First.");
    return false;
  } else {
    var out = true;
    //loop only under container divs
    $('#container_template_Drinks input[type=checkbox]').each(function() {
      if ($(this).is(":checked")) {
        console.log($(this).val())
        //your other codes
      }
    });
    if (out == false)
      return false;
  }
});

$('form#validFormCoffee').on('submit', function(event) {
  //loop only under container divs
  if (!$('#container_template_BarcodeProducts input[type=checkbox]').is(":checked")) {
    alert("Choose a Product First.");
    return false;
  } else {
    var out = true;
    //loop only under container divs
    $('#container_template_BarcodeProducts input[type=checkbox]').each(function() {
      if ($(this).is(":checked")) {
        console.log($(this).val());
        //your othere code
      }
    });
    if (out == false)
      return false;
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#Drinks">Drinks</a></li>
  <li><a data-toggle="tab" href="#BarcodeProducts">BarcodeProducts</a></li>

</ul>
<div class="tab-content">
  <div id="Drinks" class="container tab-pane active"><br>
    <div class="col-md-12 pl-0">
      <form method="POST" id="validFormCoffeeDrinks" action="{{ route('salesAddDrinks.product') }}">

        <div class="form-group">
          <div class="form-row">
            <div class="col-md-10" role="alert">
              <select name="category_salesCoffeeDrinks" id="category_salesCoffeeDrinks" class="form-control">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
              </select>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="form-row">
            <div id="container_template_Drinks" class="col-md-10">

              <input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="1">
              <input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="2">
              <input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="3" disabled>
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="col-md-6 text-left">
            <button type="submit" name="drinks_submit" class="btn btn-dark btn-sm mt-2">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div id="BarcodeProducts" class="container tab-pane fade"><br>
    <div class="col-md-12 pl-0">
      <form method="POST" id="validFormCoffee" action="{{ route('salesAdd.product') }}">

        <div class="form-group">
          <div class="form-row">
            <div class="col-md-10">
              <select name="category_salesCoffee" id="category_salesCoffee" class="form-control">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
              </select>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="form-row">
            <div id="container_template_BarcodeProducts" class="col-md-10">

              <input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="4">
              <input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="5">
              <input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="6">
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="col-md-6 text-left">
            <button type="submit" name="BarcodeProducts_submit" class="btn btn-dark btn-sm ">submit</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Помочь в развитии проекта:
Закрыть X