JavaScript Form Validation

[munchlaxxx]

If checkForm is false, I don't want the form to submit. And if checkForm is true, I would like the form to submit and the action=POST to work. I've seen several examples online where people have VERY similar code and theirs supposedly works. So what am I doing wrong? Is there a really obvious mistake?

function checkForm(){
  var checkinDate = $("#checkin").val();
  var checkoutDate = $("#checkout").val();

  var errorMsg = "";
  var errorCount = 0;


  var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1;
    var yyyy = today.getFullYear();
    var todaysDate = mm+"/"+dd+"/"+yyyy;

    if(checkinDate < todaysDate || checkoutDate < todaysDate || checkoutDate < checkinDate){
        errorMsg += "There was an error with the check-in and/or check-out date you provided.\n\n";
        errorCount++;
    }


    var adults = $("#adults").val();
    if (adults == null){
        errorMsg+="Please select the number of adults.\n\n";
        errorCount++;
    }

    var children = $("#children").val();
    if (children == null){
        errorMsg +="Please select the number of children.\n\n";
        errorCount++;
    }

    if(errorCount == 0){
    return true;
    }

    return false;

}

And here is the form:

<form action="results.php" method="post" class="form-inline">

<span><strong>Check Availability:</strong></span>
<span class="bookingSpan">
    <input type="text" id="checkin" class="form-control" value="Check-In Date">
</span>
<span class="bookingSpan">
    <input type="text" id="checkout" class="form-control" placeholder="Check-Out Date">
</span>
<span class="bookingSpan">

    <select class="selectpicker" id= "adults" name="adults" multiple title='Adults'>

        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>

    </select>
</span>

<span class="bookingSpan">
    <select class="selectpicker" id="children" name="children" multiple title='Children (Under 18)'>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</span>

<button type="submit" class="btn btn-default" onClick="return checkForm()">Submit</button>
</form>

The form validation works perfectly. If there are errors in any of the input, the alert box pops up, describing the errors. But no matter what (whether there are errors or not), the page goes to results.php.

[minitauros]

You have bound the checkForm() function to the form's submit button. I think that's what destroying your plans here. You should probably bind the function to the submit event of the form instead of to the submit button.

[munchlaxxx]

Okay, I'll try that, thanks.

[munchlaxxx]

So I have this now:

<button type="submit" id="send" class="btn btn-default">Submit</button>

and

$(document).ready(function(){

$("#send").click(function(e) {

var checkinDate = $("#checkin").val();
  var checkoutDate = $("#checkout").val();

  var errorMsg = "";
  var errorCount = 0;


  var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1;
    var yyyy = today.getFullYear();
    var todaysDate = mm+"/"+dd+"/"+yyyy;

    if(checkinDate < todaysDate || checkoutDate < todaysDate || checkoutDate <= checkinDate ){
        errorMsg += "There was an error with the check-in and/or check-out date you provided.\n\n";
        errorCount++;
    }


    var adults = $("#adults").val();
    if (adults == null){
        errorMsg+="Please select the number of adults.\n\n";
        errorCount++;
    }

    var children = $("#children").val();
    if (children == null){
        errorMsg +="Please select the number of children.\n\n";
        errorCount++;
    }

    if(errorCount > 0){
    e.preventDefault();
    alert(errorMsg);
    }



});



     $( "#checkin,#checkout" ).datepicker({
        format:"mm/dd/yyyy"
     });

      $('.selectpicker').selectpicker({

  });

 });

Yet the form still submits no matter what...I don't understand. I thought preventDefault() should stop it (if there are any errors).

[munchlaxxx]

Any other input would be appreciated, even if you're not sure if it'll work I'll try it. I've tried so many things by now. Thinking of just doing the form validation in PHP maybe. But I feel like I SHOULD be able to do it with JavaScript...I must be missing something.

[Adrian_5]

instead of $("#send").click(function(e) {
you should write something like:

$('form').on('submit', function() {

and just after you close that function's last if statement, do an else return true;

[munchlaxxx]

It didn't work. No matter what, the form submits. I can get it to alert the errors, but then it goes to results.php.

[minitauros]

This should work:

$('form#your_form').submit(function() {

    // Your code here.


    // Return false so that the form will not actually be submitted.
    return false;
});