Home > Backend Development > PHP Tutorial > javascript - Questions about bootstrap form validation

javascript - Questions about bootstrap form validation

WBOY
Release: 2016-08-04 09:20:48
Original
1467 people have browsed it

The bootstrap set in the backend can satisfy most of the styles in terms of style. There is an issue with form submission, which uses the ready-made bootstrap template. The code is as follows

<code>  <form class="form-signin">
    <h2 class="form-signin-heading">Please sign in</h2>
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="remember-me"> Remember me
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
  </form>

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

</code>
Copy after login
Copy after login

Regarding the method of form verification, there is no introduction on the official website. I know what require means, but I want to know where to find the introduction on this aspect, but I can’t find it on the official website. Thank you everyone

Because I wrote ajax to submit asynchronously, but it didn’t work. I want to use the verification form that comes with bs to do asynchronous submission. Thank you

Reply content:

The bootstrap set in the background can satisfy most of the styles in terms of style. There is an issue with form submission, which uses the ready-made bootstrap template. The code is as follows

<code>  <form class="form-signin">
    <h2 class="form-signin-heading">Please sign in</h2>
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="remember-me"> Remember me
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
  </form>

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

</code>
Copy after login
Copy after login

Regarding the method of form verification, there is no introduction on the official website. I know what require means, but I want to know where to find the introduction on this aspect, but I can’t find it on the official website. Thank you everyone

Because I wrote ajax to submit asynchronously, but it didn’t work. I want to use the verification form that comes with bs to do asynchronous submission. Thank you

Simple.

<code>$("form").submit(function(e){
    e.preventDefault();   // disabled default action
    // do something and ajax ....
    $.post("url", $("form").serializeArray())
    .done(function(){})
    .failed(function(){})
    
  });</code>
Copy after login

Before submitting the form data to ajax for processing, write a function to verify the data first. If successful, it will be handed over to ajax, and if it fails, a prompt message will be returned.

Write the server address of the action in the form tag.

I searched on github, there are many, pick your own https://github.com/search?utf8=%E2%9C%93&q=Bootstrap+Validator

You can see this page, jQuery Validate | Rookie Tutorial http://www.runoob.com/jquery/jquery-plugin-validate.html

There are plug-ins that can help you do it

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template