Önyükleme modelindeki giriş metnini doğrulayın

Question

Herhangi bir çerçeve kullanmadan bir önyükleme modelinde bir formu doğrulamak istiyorum. Aslında sadece bir giriş metni ve iki düğme "Kapat" ve "Gönder" ile basit bir model. Kullanıcı, giriş kutusuna kendi adını yazmalı ve gönder düğmesine tıklayın. Form, yöntem sonrası ile gönderilir.

Yapmak istediğim şudur: Eğer kullanıcı giriş kutusuna bir şey girmez ve "Gönder" butonuna basarsa, giriş kutusunun varsayılan mavi kenarlık yerine kırmızı bir kenarlık çizmesi gerekir. . İşte benim modal için kod:

<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> 

Ben has-error giriş metninin sınıfını değiştirmek için javascript kullanarak çalıştı ancak kırmızı anahat üretmez. Ben tıklayın gönderdiğinizde bunun sonrası yöntemiyle boş değerini gönderir yerine ait İşte benim javascript kodu var:

Burada şeylerin bir sürü karıştırma gibi hissediyorum

<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> 

. Önyükleme ve javascript için hala yeni. İstenen kırmızı çizgiyi elde etmek için nasıl gidebilirim? Teşekkürler.

Düzenleme: Doğrula fonksiyonu: önyükleme askısı içinde

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

Answer 1

Sen inputebeveyn eleman div.form-group, değil input kendisi ait CSS sınıfları değiştirmek gerekir

<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> 

için Bunu başarmak için JavaScript kodunuzu değiştirin:

<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> 

Eğer .help-blok var gördüğünüz gibi

ekran: none şimdi javascript fonksiyonu yazıp doğrulama kontrol ve doğrulama şimdi bunu ekran yapmak geçirirseniz: block ... bu

önyükleme askısı ile keyfini yapabileceğiniz yolu :)

bulunuyor Bu gibi görünmelidir Gönder düğmesine tıklamadan sonra

HTML:

Answer 3

onun çok kolay

sadece uygulamak sınıf .has yanılma

<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

Sadece yardım için bu

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