मैं इस फॉर्म को मान्य करने की कोशिश कर रहा हूं। मैं यह सुनिश्चित करना चाहता हूं कि उपयोगकर्ता कम से कम 1 उपयोगकर्ता का चयन करे और शरीर में कुछ दर्ज करे। प्रपत्र एक चयन 2 फ़ील्ड और एक summernote टेक्स्ट क्षेत्र का उपयोग करता है। मैं क्या गलत कर रहा हूं?

फार्म:

    <form id="ShareThisForm" method="post">
        <div class="modal fade" id="Share" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-light"><i class="fas fa-share-alt mr-1"></i>Share to</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body p-3">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-user mr-2"></i>Users
                                    </span>
                                </div>
                                <select class="form-control select2bs4 select2-hidden-accessible" multiple="" data-placeholder="Share to" tabindex="-1" aria-hidden="true" id="sharing" name="users[]" data-select2-id="sharing">
                                    <?php foreach($this->Database->get('users')->fetchAll() as $user){ ?>
                                        <option value="<?=$user['id']?>"><?=ucwords(str_replace('_',' ',str_replace('.',' ',$user['username'])))?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <textarea class="form-control wysihtml5-alt" name="body"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" name="ShareThis" class="btn btn-primary"><i class="fas fa-share-alt mr-1"></i>Share</button></div>
                    </div>
                </div>
            </div>
        </div>
    </form>

लिपी:

    <script>
        var select2label
        $(document).ready(function () {
            $("#ShareThisForm").validate({
                rules: {
                    "users[]": {
                        required: true,
                    },
                    body: {
                        required: true,
                    },
                },
            });
        });
    </script>
0
L. Ouellet 17 सितंबर 2020, 23:37

1 उत्तर

सबसे बढ़िया उत्तर

मेरा मानना ​​है कि आप अपने users एकाधिक चयन dropdown के लिए select2 प्लगइन का उपयोग कर रहे हैं। jQuery validate, select2 प्लगइन के साथ डिफ़ॉल्ट के साथ काम नहीं करेगा, आपको errorPlacement विधि चयनित फ़ील्ड के नीचे एक आवश्यक field संदेश लेबल जोड़ने की विधि।

मैं देख सकता हूं कि आप अपने मोडल के लिए boostrap का भी उपयोग कर रहे हैं ताकि आप validation संदेश लाल रंग में सुनिश्चित करने के लिए कक्षा text-danger का भी उपयोग कर सकें।

यदि ड्रॉपडाउन से कुछ नहीं चयनित है तो सबमिट पर क्लिक करने पर सत्यापन संदेश दिखाई देगा > बटन या यदि कुछ चयनित है, तो हमें यह सुनिश्चित करने के लिए select2 प्लगइन बदलें फ़ंक्शन का उपयोग करने की आवश्यकता है कि उपयोगकर्ता का चयन करने के बाद हमारा त्रुटि लेबल हटाया गया . हमें select2 लेबल को वैश्विक चर के रूप में संग्रहीत करने की आवश्यकता है ताकि चयन के बाद इसे हटाया जा सके या अन्यथा त्रुटि संदेश फिर से दिखाएं।

$('#users').on("change", function(e) {
    if (select2label){
        select2label.remove(); //remove label
    }
});

जैसा कि आप अपने select विकल्प नाम विशेषताओं को array => users[] के रूप में जोड़ रहे हैं, आपको नीचे सत्यापन के लिए नियम जोड़ने होंगे:

"users[]": {
   required : true
},

संपादित करें: जैसा कि आपने अब उल्लेख किया है कि आप अपने टेक्स्ट क्षेत्र के लिए समरनोट का उपयोग कर रहे हैं और आपने इसे अनदेखा करने के लिए एक संदर्भ प्रदान किया है। मैंने अपने उत्तर में ignore: ".note-editor *", भी जोड़ा है।

लाइव वर्किंग डेमो:

//Initiate select2 plugin on users
$('#users').select2()

//global var for select 2 label
var select2label

$(document).ready(function() {
  $("#ShareThisForm").validate({
    ignore: ".note-editor *", //ignore summernote validation
    rules: {
      "users[]": {
        required: true
      },
      body: {
        required: true,
      },
    },
    errorPlacement: function(label, element) {
      if (element.hasClass('select2bs4')) {
        label.insertAfter(element.parent()).addClass('mt-2 text-danger');
        select2label = label
      } else {
        label.insertAfter(element).addClass('mt-2 text-danger');
      }
    },
    submitHandler: function(form) {
      //submit modal form
    },
  });
});

//watch the change on select - if label exist then remove it
$('#users').on("change", function(e) {
  if (select2label) {
    select2label.remove(); //remove label
  }
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Share">
 Open Modal
</button>

<form id="ShareThisForm" method="post">
  <div class="modal fade" id="Share" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header bg-primary">
          <h5 class="modal-title text-light"><i class="fas fa-share-alt mr-1"></i>Share To</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="'.$this->Language->_ARRAY['Close'].'">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body p-3">
          <div class="form-group">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">
                          <i class="fas fa-user mr-2"></i>Users
                        </span>
              </div>
              <select class="form-control select2bs4" multiple data-placeholder="Share to" tabindex="-1" aria-hidden="true" id="users" name="users[]" data-select2-id="users">
                <option value="0">User1</option>
                <option value="1">User2</option>
              </select>

            </div>
          </div>
          <div class="form-group">
            <textarea class="form-control wysihtml5-alt" name="body"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" name="ShareThis" class="btn btn-primary"><i class="fas fa-share-alt mr-1"></i>Submit</button></div>
      </div>
    </div>
  </div>
  </div>
</form>
1
Always Helping 18 सितंबर 2020, 17:05