부트 스트랩 + jQuery를 사용하여 선택한 플러그인의 유효성을 검사하는 방법

사용 가능한 제품에 대한 카테고리 목록을 만들었습니다. multiSelect 드롭 다운 옵션에 대해 bootstrap + choosen 플러그인을 사용하고 있습니다. 내가 원하는 것은 사용자가 양식을 제출할 때 적어도 하나의 옵션을 선택하는 것입니다. 양식을 제출할 때마다 범주 목록이 비어서는 안됩니다. 그것은 내 동료에 따라 PHP에서 수행되어야하지만 이미 제 3 자 플러그인을 사용하여 multiSelect 드롭 다운 그래서 jQuery 또는 PHP 아무 문제. 어떤 도움을 주시면 감사하겠습니다.부트 스트랩 + jQuery를 사용하여 선택한 플러그인의 유효성을 검사하는 방법

내가이

내 부트 스트랩 코드와 PHP 유효성 검사 코드를 시도

<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" 
);

나는 또한 jQuery를 함께 노력을

는

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

출처

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>

출처

2017-10-22 22:53:01 mehdi

단지 작동하지 않는 시도 ..이 작품인가 너를 위해서.? –

이것은 ajax에 의해 작성되었습니다. 이것은 매우 간단합니다. 길이 <1 || 길이> 3 : 오류 – mehdi

고마워요 .. 작동합니다. –

부트 스트랩 + jQuery를 사용하여 선택한 플러그인의 유효성을 검사하는 방법

답변

관련 문제