2014-11-06 1 views
0

Я бы на 3 вопроса, касающиеся синтаксиса JQuery:Bootstrap модальности, объединить Jquery и JS код в виде проверки

1) Модальный не отображается. Это может быть оператор (& &) проблема? Как я понял? Он должен появляться только в том случае, если вещь действительна.

2) Как скомбинировать submit submit По умолчанию с допустимыми классами? Я использовал это раньше, но никогда не сочетался с JQuery. Я хочу, чтобы модальная функция отображалась только тогда, когда is_email действителен, и когда поля InputEmail, InputMessage и InputName были заполнены.

$('#submit').click(function(submit){ 
     if($('#InputEmail'&&'#InputMessage'&&'#InputName').val().length === 0)&& (is_email=="valid") { 
     $('#myModal').modal('show'); 
     submit.preventDefault(); 
     } 

    ); 

4) Если я ставлю Col-LG6, он изменит размер, однако в документации сказано, что я должен добавить следующее:

$('.message-group').attr({ 
       class: 'has-success' 

работает, но если добавить Col-LG6 form- group name-group изменит размер. Почему это?

Мой синтаксис:

/*JQUERY FORM EFFECTS*/ 

/*$('#InputName').on('input', function() { 
    var input=$(this); 
    var is_name=input.val(); 
    if(is_name){input.removeClass("invalid").addClass("valid");} 
    else{input.removeClass("valid").addClass("invalid");} 
}); Can I comment that out? */ 

$('#InputEmail').on('input', function() { 
    var input=$(this); 
    var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-][email protected][a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; 
    var is_email=re.test(input.val()); 
    if(is_email){ 
     input.removeClass("invalid").addClass("valid"); 

       } 
    else{ 
     input.removeClass("valid").addClass("invalid"); 
    } 
}); 

/* Display please enter a name. */ 

$('#InputName').focusout(function(){ 
     if($('#InputName').val().length === 0) { 
      $('.name-group .message-block').text('Please enter your name.'); 
      $('.name-group').attr({ 
       class: 'has-error' 
      }); // end attr 
     } else { 
      $('.name-group .message-block').text(''); 
      $('.name-group').attr({ 
       class: 'has-success' 
      }); //end attr 
     } 
    }); //end focus out 

$('#InputMessage').focusout(function(){ 
     if($('#InputMessage').val().length === 0) { 
      $('.message-group .message-block').text('Please enter your message.'); 
      $('.message-group').attr({ 
       class: 'has-error' 
      }); // end attr 
     } else { 
      $('.message-group .message-block').text(''); 
      $('.message-group').attr({ 
       class: 'has-success' 
      }); //end attr 
     } 
    }); //end focus out 

$('#InputEmail').focusout(function(){ 
     if($('#InputEmail').val().length === 0) { 
      $('.mail-group .email-block').text('Please enter your email.'); 
      $('.mail-group').attr({ 
       class: 'has-error' 
      }); // end attr 
     } else { 
      $('.mail-group .email-block').text(''); 
      $('.mail-group').attr({ 
       class: 'has-success' 
      }); //end attr 
     } 
    }); //end focus out 

$('#submit').click(function(submit){ 
     if($('#InputEmail'&&'#InputMessage'&&'#InputName').val().length === 0)&& (is_email=="valid") { 
     $('#myModal').modal('show'); 
     submit.preventDefault(); 
     } 

    ); 

Моя форма:

 <div class="form-group name-group"> 
     <label for="InputName">Your Name</label> 
     <div class="input-group"> 
      <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required> 
      <span class="input-group-addon"> 
      <i class="glyphicon glyphicon-ok form-control-feedback"></i> 
      </span> 
     </div> 
     <span class="text-block"></span> 
    </div> 

     <div class="form-group mail-group"> 
     <label for="InputEmail">Your Email</label> 
     <div class="input-group"> 
      <input type="email" class="form-control" id="InputEmail" name="InputEmail" placeholder="Enter Email" required> 
      <span class="input-group-addon"> 
      <i class="glyphicon glyphicon-ok form-control-feedback"></i> 
      </span> 
     </div> 
     <span class="email-block"></span> 
     </div> 

     <div class="form-group message-group"> 
     <label for="InputMessage">Message</label> 
     <div class="input-group" 
> 
      <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> 
     </div> 
     <span class="message-block"></span> 
     </div> 

     <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right"> 
    </div> 
    </form> 
+1

Можете ли вы воспроизвести эту проблему на скрипке? – Aaron

ответ

1

Можете ли вы показать разметку для DIV с идентификатором myModal?

Кроме того, вы ищете мультиселекцию? Если так вот ссылка на документацию JQuery на включая несколько запросов элементов в одном вызове селектора: http://api.jquery.com/multiple-selector/

Что-то подобное:

if($('#InputEmail,#InputMessage,#InputName').val().length === 0) 
    { 
     alert('not filled out'); 
     return false; 
    } 
    else return true; 

Кроме того, если это прямая копия/паста, вам не хватает закрывающая скобка на своем, если заявление:

if($('#InputEmail'&&'#InputMessage'&&'#InputName').val().length === 0)&& (is_email=="valid")) 

Кроме того, могли бы вы уточнить, что вы спрашиваете в вашем файле загрузки .css вопрос?

+0

Я хочу, чтобы модальная функция отображалась, если все верно, я делаю это с первой или со второй частью, которую вы написали? Если я вложил первое, это не работает, потому что это даст мне предупреждение, как только я открою html-документ. И так или иначе, пожалуйста, заполните это поле? Что ты предлагаешь? Я использую стандартный bootstrap modal, который я определил в своем HTML. – Thankyou

+0

Это будет первое утверждение. Второе утверждение просто показало, что была синтаксическая ошибка. – csharplova

+0

Я, лично, присоединяю обратный вызов к кнопке, которую вы нажмете, чтобы открыть модальный: $ ('# whatever_your_button_id_is'). Click (function() {/ * вставить здесь код проверки, открыть модальный, если он действителен, отобразить ошибку if не*/}); – csharplova

Смежные вопросы