So validieren Sie Bootstrap + gewähltes Plugin mit jQuery php

Ich habe eine Kategorieliste für verfügbare Produkte erstellt. Ich benutze bootstrap + chosen Plugin für MultiSelect Dropdown-Optionen. Was ich will, ist der Benutzer, um mindestens 1 Option auszuwählen, wenn er/sie das Formular absendet. Ich meine, wann immer das Formular eingereicht wurde, sollte die Kategorieliste nicht leer sein. Es sollte in PHP nach meinen Kollegen getan werden, aber ich habe bereits Drittanbieter-Plugin für MultiSelect DropDown so jQuery oder PHP keine Bedeutung. Jede Hilfe wäre willkommen.So validieren Sie Bootstrap + gewähltes Plugin mit jQuery php

ich diesen

Meine Bootstrap-Code und PHP-Validierungscode versucht:

<select multiple class="chosen-select" data-placeholder="Select Your Category" name="category"> 
    <option>Product a</option> 
    <option>Product b</option> 
    <option>Product c</option> 
    <option>Product d</option> 
    <option>Product e</option> 
    <option>Product f</option> 
    <option>Product g</option> 
    <?php 
    foreach ($catlist as $category) { 
     if (isset($_POST["category"]) && $_POST["category"] == $category) 
     echo "<option selected='selected' value='$category'>$category</option>"; 
     else 
     echo "<option value='$category'>$category</option>"; 
    } 
    ?> 
</select> 

//define $categorylist here 

$catlist = array (
    "Product a", 
    "Product b", 
    "Product c", 
    "Product d" 
    "Product e" 
    "Product f" 
    "Product g" 
);

Ich habe auch versucht mit jQuery

<script> 
    $(document).ready(function(){ 
    $('.chosen-select').chosen({ 
     width: "100%", 
     min_selected_options:1, 
     max_selected_options:3 
    }); 
    }); 
</script>

Quelle

2017-10-22 Linnea Anderson

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <form action="#" method="post" id="form"> 
    <p id="message"></p> 
    <select multiple class="chosen-select" data-placeholder="Select Your Category" id="category" name="category[]"> 
     <option>Product a</option> 
     <option>Product b</option> 
     <option>Product c</option> 
     <option>Product d</option> 
     <option>Product e</option> 
     <option>Product f</option> 
     <option>Product g</option> 
    </select> 
    <button type="submit">submit</button> 
</form> 

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 

<script> 
    $('#form').on('submit', function (e) { 
     // console.log('errors'); 
     e.preventDefault(); 
     var selectData = $('#category').val(); 
     // console.log(selectData); 

     if (selectData.length< 1 || selectData.length> 3) { 
      $('#message').html('error').css({'color':'red'}); 
      return; 
     } 

     $.ajax({ 
      type: 'post', 
      url:$(location).attr('href'), 
      data: selectData, 
      success: function (data) { 
       $('#message').html('success').css({'color':'green'}); 

      } 
     }); 
    }); 
</script> 
</body> 
</html>

Quelle

2017-10-22 22:53:01 mehdi

gerade versucht, funktioniert nicht .. Ist das funktioniert, für dich. –

Versuchen Sie dies wurde von Ajax geschrieben. Dies ist sehr einfach Länge <1 || Länge> 3: Fehler – mehdi

Danke, es funktioniert .. –

So validieren Sie Bootstrap + gewähltes Plugin mit jQuery php

Antwort

Verwandte Themen