2017-03-04 47 views
0

我想在JQuery UI對話框上調用Bootstrap formValidation。但它不工作。我嘗試了很多方法,但沒有幫助。請有人引導我。如何使用Jquery UI對話框調用Bootstrap formValidation

我的驗證,我想打電話給是

jQuery代碼

$('#form_question').formValidation({ 
     framework: 'bootstrap', 
     excluded: ':disabled', 
     icon: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
      }, 
      fields: { 
       newq_title_error: { 
        validators: { 
         notEmpty: { 
          message: 'The username is required' 
          }, 
         stringLength: { 
          min: 4, 
          message: 'The username must be more than 4' 
          } 
         } 
       }             
     } 
    }); 

我的jQuery UI的對話形式是

<div class='new_question ui-front' id='new_question'> 
<form id='form_question' name='form_question' action=''> 
<span class='iconclose'><i class='fa fa-close fa-lg'></i></span> 
<div id='error_title' class='error error-bk' style='display:none;' align='center'>Please check the following errors</div> 
<div id='general_error' class='error error-bk' style='display:none;' align='center'></div> 

    <p class='newq_subtitle'>Title*</p> 
    <div class='newq_text_div'> 
     <div class='newq_text' id='newq_text'>    
      <input type='text' class='newq_title' id='newq_title' name='newq_title' autocomplete='off' > 
      <span id='newq_title_error' class='error' style='display:none;'></span> 
     </div> 
    </div>  
</form>   
</div> 

這是彈出來當我們點擊a Button

<button class='btn btn-primary' type='button' id='asknew'>Ask Question</button> 

jQuery的因爲這是

askquestion_dialog(function(event, ui) {  
      var questionbox=$("#new_question"); 
      $('button#postnew').unbind('click').click(function(event, ui) { 
       #Old validation code was here. I have tested putting formvalidation here. But didnt work here too  
      }); 
     }).dialog('open'); 

Askquestion對話框功能

function askquestion_dialog(fnopen) 
    { 

    return $("#new_question").dialog({ 
      dialogClass: 'new_question', 
      position: ['center', 70], 
      autoOpen:false, 
      modal:true, 
      width:710, 
      height:640, 
      resizable:false, 
      open: fnopen, 
      close: function(event) { 
       /*if(!$(event.currentTarget).hasClass('ui-dialog-titlebar-close')) { 
         load_question(questionid); 
       }*/ 
       $(this).find("#form_question").trigger('reset'); 
       $(this).find("#tags_choose").trigger("chosen:updated"); 
       $(this).dialog('destroy'); 
      } 
     }); 
    } 

任何想法如何調用引導formValidation在jQuery UI的dialog.Please幫助

回答

0

後來我找到了解決辦法。由於引導驗證和Jquery UI衝突,我已手動調用每個表單元素的Onblur驗證

function validateQuestionTitle(){ 
    var title = $("#newq_title").val(); 
     if(title == ''){ 
     $('#newq_title').css('border-color', 'red'); 
     $('#newq_success').removeClass('glyphicon glyphicon-ok newq_title-feedback').addClass('glyphicon glyphicon-remove newq_title-feedback'); 
     $("#newq_title_error").html("Please provide a Title").show(); 
     }else{ 
     $('#newq_title').css('border-color', 'green'); 
     $('#newq_success').removeClass('glyphicon glyphicon-remove newq_title-feedback').addClass('glyphicon glyphicon-ok newq_title-feedback');  
     $("#newq_title_error").html("").hide(); 
     } 
} 
相關問題