clusterBuddy clusterBuddy - 4 months ago 11
HTML Question

Form is spanned into 2 seperate divs => not validating properly

My form looks like this:

enter image description here

My reduced in-lament code looks like this:

<div class="row no-pad">
<form class="form-control-static" action="lib/leadGen.php" method="post">
<div class="col-xs-6 left-hand-input">

<label for="firstName">FIRST NAME:</label><br>
<input required name="firstName" id="firstName" type="text">
</div>
<div class="col-xs-6 right-hand-input">
<label for="lastName">LAST NAME:</label><br>
<input required name="lastName" id="lastName" type="text"><br>
</div>
</form>
</div>


I am using JQuery Validate
and after adding the library I just scripted this right before the body closes:

<script>
$('.form-control-static').validate();
</script>


The Issue: it doesn't validate any
input
on the
.right-hand-input
div.
Please feel free to submit any other libraries that overcome this issue.


EDITED: moved form outside of breaking divs.

Answer

Why Don't you make something like this?

<form class="form-control-static" action="lib/leadGen.php" method="post">

<div class="row no-pad">
    <div class="col-xs-6 left-hand-input">
            <label for="firstName">FIRST NAME:</label><br>
            <input required name="firstName" id="firstName" type="text">
    </div>
    <div class="col-xs-6 right-hand-input">
        <label for="lastName">LAST NAME:</label><br>
        <input required name="lastName" id="lastName" type="text"><br>
    </div>
</div>

</form>

and add some CSS to form tag to correctly reflect inside DIVs width