बूटस्ट्रैप मोडल

Question

में इनपुट टेक्स्ट मान्य करें मैं किसी भी ढांचे का उपयोग किये बिना बूटस्ट्रैप मोडल में एक फॉर्म को मान्य करना चाहता हूं। यह वास्तव में केवल एक इनपुट पाठ और दो बटन "बंद करें" और "भेजें" के साथ एक साधारण मोडल है। उपयोगकर्ता को अपना नाम इनपुट बॉक्स में टाइप करना चाहिए और भेजें पर क्लिक करना चाहिए। फॉर्म विधि पोस्ट के साथ भेजा गया है।

मैं जो करना चाहता हूं वह यह है कि, यदि उपयोगकर्ता "भेजें" बटन पर इनपुट बॉक्स में क्लिक नहीं करता है, तो इनपुट बॉक्स में डिफ़ॉल्ट नीली सीमा के बजाय इसे एक लाल सीमा को घेरना चाहिए । यहाँ मेरी मोडल के लिए कोड है:

<div id="myModal" class="modal fade" tabindex="-1"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <!--form--> 

      <form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title">My modal</h4> 
       </div> 
       <div class="modal-body"> 
        <p> 
         Please enter your name: 
        </p> 
        <br/> 

        <div class="form-group"> 

         <div class="col-lg-12"> 
          <label class="control-label" for="firstname">Name</label> 
          <input type="text" class="form-control required" id="firstname" name="firstname"> 
         </div> 
        </div> 

       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button id="myFormSubmit" class="btn btn-primary">Send</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

मैं जावास्क्रिप्ट का उपयोग करने के लिए has-error इनपुट पाठ के वर्ग बदलने की कोशिश की, लेकिन यह लाल घेरे के उत्पादन नहीं करता है। जब मैं पर क्लिक करें भेजने यह पोस्ट विधि के माध्यम से रिक्त मान भेजता बजाय की यहाँ मेरी जावास्क्रिप्ट कोड है:

<script type="text/javascript"> 
     $('#myForm').validate({ 
      rules: { 
       name: { 
        minlength: 1, 
        required: true 
       }, 
      }, 
      highlight: function (element) { 
       $('#firstname').removeClass('has-success').addClass('has-error'); 
      }, 
      success: function (element) { 
       $('#firstname').removeClass('has-error').addClass('has-success'); 
      } 
     }); 
    </script> 

मुझे लगता है कि मैं यहाँ चीजों की एक पूरी बहुत कुछ मिश्रण कर रहा हूँ। मैं अभी भी बूटस्ट्रैप और जावास्क्रिप्ट के लिए नया हूँ। वांछित लाल रूपरेखा प्राप्त करने के बारे में मैं कैसे जा सकता हूं? धन्यवाद।

संपादित करें: मान्य समारोह:

function validate() { 
    var x = document.forms["myForm"]["firstname"].value; 
    if (x == null || x == "") { 
     return false; 
    } 
} 

Answer 1

आप inputमाता पिता तत्व div.form-group, नहीं input ही की CSS वर्गों को बदलने की जरूरत

<div class="form-group has-error"> 
    <div class="col-lg-12"> 
     <label class="control-label" for="firstname">Name</label> 
     <input type="text" class="form-control required" id="firstname" name="firstname"> 
    </div> 
</div> 

करने के लिए इसे प्राप्त करें, अपने JavaScript कोड को इसमें बदलें:

<script type="text/javascript"> 
    $('#myForm').on('submit', function(e) { 
    var firstName = $('#firstname'); 

    // Check if there is an entered value 
    if(!firstName.val()) { 
     // Add errors highlight 
     firstName.closest('.form-group').removeClass('has-success').addClass('has-error'); 

     // Stop submission of the form 
     e.preventDefault(); 
    } else { 
     // Remove the errors highlight 
     firstName.closest('.form-group').removeClass('has-error').addClass('has-success'); 
    } 
    }); 
</script> 

Answer 2

बूट पट्टा में div ...

<div class="form-group"> 
    <div class="row"> 

     <label class="col-xs-2 col-sm-2 control-label">city:</label> 

     <div class="col-xs-3 col-sm-3 formGroups" 
      id="city_form1"> 
      <form:input name="city" class="form-control" 
       placeholder="City" data-toggle="tooltip" 
       data-placement="bottom" title="City" maxlength="15" /> 

      <small class="help-block col-sm-offset-0 col-sm-9" 
       style="display: none;">city must require</small> 
     </div> 
    </div> 
</div> 

जैसा कि आप देख नहीं है .help-ब्लॉक प्रदर्शन है: कोई नहीं अब आप जावास्क्रिप्ट समारोह लिख सकते हैं और सत्यापन की जांच करें और यदि सत्यापन अब पास करता है तो इसे प्रदर्शित करें: ब्लॉक ... इस तरह से आप

बूट पट्टा के साथ आनंद ले सकते हैं :)

इस तरह दिखना चाहिए सबमिट बटन पर क्लिक करने के बाद

HTML:

Answer 3

इसकी बहुत आसान

सिर्फ लागू वर्ग हालांिक त्रुटि द्वारा जावास्क्रिप्ट समारोह

<div class="form-group has-error"> 
    <div class="row"> 

     <label class="col-xs-2 col-sm-2 control-label">city:</label> 

     <div class="col-xs-3 col-sm-3 formGroups" 
      id="city_form1"> 
      <form:input name="city" class="form-control" 
       placeholder="City" data-toggle="tooltip" 
       data-placement="bottom" title="City" maxlength="15" /> 

     </div> 
    </div> 
</div> 

Answer 4

वैसे ही जैसे आपकी मदद के लिए इस

<input type="text" class="form-control required" id="firstname" name="firstname" required/>