Проверка формы бутстрапа с Javascript

У меня есть форма бутстрапа, который я бы хотел проверить с помощью Javascript, нажав на ссылку (НЕ кнопку отправки). Вот мой пример кода.Проверка формы бутстрапа с Javascript

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title></title> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
    <style> 
     /* ========================================================================== 
      Demo using Bootstrap 3.3.4 and jQuery 1.11.2 
      You don't need any of the following styles for the form to work properly, 
      these are just helpers for the demo/test page. 
     ========================================================================== */ 

     #wrapper { 
     width:595px; 
     margin:0 auto; 
     } 
     legend { 
     margin-top: 20px; 
     } 
     #attribution { 
     font-size:12px; 
     color:#999; 
     padding:20px; 
     margin:20px 0; 
     border-top:1px solid #ccc; 
     } 
     #O_o { 
     text-align: center; 
     background: #33577b; 
     color: #b4c9dd; 
     border-bottom: 1px solid #294663; 
     } 
     #O_o a:link, #O_o a:visited { 
     color: #b4c9dd; 
     border-bottom: #b4c9dd; 
     display: block; 
     padding: 8px; 
     text-decoration: none; 
     } 
     #O_o a:hover, #O_o a:active { 
     color: #fff; 
     border-bottom: #fff; 
     text-decoration: none; 
     } 
     @media only screen and (max-width: 620px), only screen and (max-device-width: 620px) { 
     #wrapper { 
      width: 90%; 
     } 
     legend { 
      font-size: 24px; 
      font-weight: 500; 
     } 
     } 
     </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

    <script type="text/javascript">  
    </script> 
    <script type="text/javascript" src="<?php echo base_url('scripts/js/validator.min.js'); ?>"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <!-- only added as a smoke test for js conflicts --> 
</head> 

<body>  
    <div id="wrapper"> 

     <form data-toggle="validator" role="form" id="form" name="extra" value="me"> 

     <div id="entry1" class="clonedInput"> 
      <h2 id="reference" name="reference" class="heading-reference">Entry #1</h2> 
      <fieldset> 

     <!-- Select Basic --> 
     <label class="label_ttl control-label" for="title">Title:</label> 


     <!-- Text input--> 
     <div class="form-group"> 
      <label class="label_fn control-label" for="first_name">First name:</label> 
      <input id="first_name" name="first_name" type="text" placeholder="" class="form-control" required> 
      <p class="help-block">This field is required.</p> 
     </div> 


     </div><!-- end #entry1 --> 


     <!-- Button --> 
     <p> 
      <a href="" onclick="myFunction()">Submit</a> 
     </p> 

     </fieldset> 
     </form> 
    </div> <!-- end wrapper --> 

    <script> 
    function myFunction(){ 
     $('#form').validator().on('submit', function (e) { 
     if (e.isDefaultPrevented()) { 
     // handle the invalid form... 
     } else { 
     // everything looks good! 
     } 
    }) 
    } 
    </script> 
</body> 
</html>

Am с помощью этой библиотеки для проверки http://1000hz.github.io/bootstrap-validator/#validator-usage

мне нужно «OnClick», чтобы запустить функцию JS и запустить проверку, которая должна дать мне истинное (то есть передать) или ложно (т.е. не в состоянии).

Примечание: Является полным noob в JS, и я по существу стараюсь подрезать это, чтобы он работал для меня.

источник

2015-05-28 user1048839

Вы можете вызвать функцию по щелчку ссылке, такие как:

function myFunction(){ 
    $("#form").submit(function() { 
     $(this).validator(function(e) { 
      if (e.isDefaultPrevented()) { 
       // handle the invalid form... 
      } else { 
       // everything looks good! 
      } 
     }); 
    }); 
}

Источник: https://api.jquery.com/submit/

источник

2015-05-28 23:40:52

Я бы рекомендовал использовать Validate запроса (http://jqueryvalidation.org). Он имеет множество опций и отлично работает с бутстрапом. Вы также можете проверить поля перед отправкой с использованием метода valid() или выполнить проверку с использованием метода validate().

Вот краткий пример https://jsfiddle.net/Lu165LLt/1/

<form id="myform" class="container"> 
    <div class="form-group"> 
     <label class="control-label" for="name">Name</label> 
     <input type="text" name="name" class="form-control" required /> 
    </div> 
    <a>Validate!</a> 
</form> 

$.validator.setDefaults({ 
    debug: true, 
    success: "valid" 
}); 
var form = $("#myform"); 
form.validate(); 
$("a").click(function() { 
    alert("Valid: " + form.valid()); 
});

библиотеки: JQuery, JQuery Validate, Bootstrap

источник

2015-05-29 00:17:14 chrana

Я хотел бы избежать других библиотек. Вышеупомянутый вышеописанный вышеописанный виброанализатор очень хорошо (в соответствии с документацией) подключается к HTML-элементам с использованием бутстрапоподобных идентификаторов. Поскольку я почти не знаю JS, я бы хотел остаться на стороне HTML. – user1048839

Проверка формы бутстрапа с Javascript

ответ

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