2017-01-11 3 views
1

Я попытался использовать BootstrapValidator, но по какой-то причине он не отправляет форму, если я не удалю JS-скрипт.BootstrapValidator не отправляет форму

JS Сценарий:

$(document).ready(function() { 
    $('#loginForm').bootstrapValidator({ 
     framework: 'bootstrap', 
     icon: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      email: { 
       validators: { 
        notEmpty: { 
         message: 'The email address is required' 
        }, 
        emailAddress: { 
         message: 'The input is not a valid email address' 
        } 
       } 
      }, 
      pass: { 
       validators: { 
        notEmpty: { 
         message: 'The password is required' 
        }, 
        different: { 
         field: 'email', 
         message: 'The password cannot be the same as username' 
        } 
       } 
      }, 
     } 
    }); 
}); 

И моя форма:

<div class="col-sm-4 col-sm-offset-5 col-md-4 col-md-offset-5 main"> 
<h1 class="page-header">Please sign in</h1> 
     <form id="loginForm" class="form-signin" action="ApplicantLogin.php" method="POST"> 
     <label for="inputEmail" class="sr-only">e-Mail</label> 
     <input type="text" id="inputEmail" class="form-control" placeholder="e-Mail" name="email" required autofocus> 
     <label for="inputPassword" class="sr-only">Password</label> 
     <input type="password" id="inputPassword" class="form-control" placeholder="Password" name="pass" required> 
     <div class="checkbox"> 
      <label> 
      <input type="checkbox" value="remember-me"> Remember me 
      </label> 
     </div> 
     <button class="btn btn-lg btn-primary btn-block" name="loginbtn" value="login">Sign in</button> 
     </form> 

    </div> <!-- /container --> 

Я изменил название кнопки к другому, чем по умолчанию, как говорит создатель, но до сих пор не работает. Любые идеи почему? Однако проверка достоверна.

+0

Вы связали библиотечный jquery.min.js 'и «самозагрузки .min.js? – MarioZ

+0

Да, я сделал. Нет ошибок при проверке страницы. – Bobys

ответ

0

Ваша форма не отправлена, потому что у вас нет submit button. Добавьте type="submit" к нему.

<button type="submit" class="btn btn-lg btn-primary btn-block" name="loginbtn" value="login">Sign in</button> 
+1

Вы найдете это глупо, но я видел на странице разработчика, что мне нужно удалить/переименовать name = "submit" или id = "submit". и я удалил type = "submit". Спасибо что подметил это. – Bobys

+0

Я сделал скрипку с кодом @Bobys и отправлю работы: [fiddle] (https://jsfiddle.net/MarioZG/497snubr/) – MarioZ

+0

И в моем localhost также работает, добавив библиотеки. – MarioZ

0

Я попытался код вы предоставили как в моем локальном хосте и в скрипку и она работает. Я попытался вставить ту же скрипку здесь и консоль показывает эту ошибку:

bootstrap validator is not a function

почему-то кажется, что плагин не загружен. Возможно, это то, что происходит в вашей сети. Чтобы решить эту проблему вы можете связать библиотеку bootsrap валидатора:

//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css 


//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js 

Если валидатор работает он должен представить с помощью кнопки, что у вас есть, и если вы щелкаете с пустыми входами он должен отображать сообщение.

  • Проверьте журнал консоль, если та же ошибка записываются
  • Убедитесь, что JQuery является correclty связана

This is the link to to the fiddle working

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