Twitter Bootstrap Question posted in

Twitter bootstrap – Form not validating required fields with BootStrap

I have a form that submits with empty required fields.

I’m using Twitter BootStrap with it.

I posted this example in jsFiddle.

Maybe is just an tag issue from BootStrap, but i’m really not seeing what is wrong.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for the answers.

    Since I have a button (div, actually) outside the form that will trigger the submit, I found my way by (quick fix) triggering a click on a hidden submit button.

    The HTML:

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form class="ajaxForm">
    <div class="container col-sm-6 col-xs-12">
        <div class="form-group input-group"> <span class="input-group-addon">
               Nome
           </span>
            <input type="text" class="form-control nome" required />
        </div>
    </div>
    <div class="container col-sm-6 col-xs-12">
        <div class="form-group input-group"> <span class="input-group-addon">
                CPF
            </span>
            <input type="text" class="form-control cpf" required />
        </div>
    </div>
    <input type="submit" style="display:none" /> <!-- The hidden button -->
</form>
<button class="action btn btn-success">Teste</button>

    The JavaScript:

    $(".action").click(() = > {
    $(".ajaxForm input[type='submit']").click();
});
$(".ajaxForm").submit(() = > false);

    So, this quick fix will work, for now. Here is the jsFiddle updated.


  2. 0

    3 things:

    1. That is not how you use required.
    2. You need to wrap your jQuery code in .ready().
    3. Move the <button> element inside the <form> and make it type="submit".

    Updated Code:

    $(document).ready(function(){
    $(".action").click(()=>{
        $(".ajaxForm").submit();
    });
    $(".ajaxForm").submit(()=>false);
});
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form class="ajaxForm">
    <div class="container col-sm-6 col-xs-12">
        <div class="form-group input-group">
            <span class="input-group-addon">
                Nome
            </span>
            <input type="text" class="form-control nome" required />
        </div>
    </div>
    <div class="container col-sm-6 col-xs-12">
        <div class="form-group input-group">
            <span class="input-group-addon">
                CPF
            </span>
            <input type="text" class="form-control cpf" required />
        </div>
    </div>

    <button type="submit" class="action btn btn-success">Teste</button>
</form>

    Updated jsFiddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search