We Keep Coding

When clicking the Submit button on my web form, how come the validation errors for the Input fields display, even when these fields have values?

When testing my web form that was built using HTML, CSS, Bootstrap, PHP and jQuery, the first thing I do is click the Submit button. When I do this, the text-danger errors display below the Input and Text Area fields as expected since the fields are empty. If I add a value in the Input field "Name" and click the Submit button again, the text-danger field continues to display below the Name field. The same goes when I try the same thing for the Email and Security Check fields.
When I add a value in the Message Text Area field, the text-danger error for the message field disappears along with the other errors. The message field needs to have a value in order for the errors for all of the fields to disappear.
How should I set up my jQuery so that once a value is added to a field and I click the Submit button to test, the text-danger error for that specific field no longer displays?
HTML and jQuery Code
<div class="container">
<div class="row">
<form method="post" action="index.php" class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" id="name" name="name" placeholder="Enter your name" class="form-control" value="<?php echo $name;?>">
<p class="text-danger">You need to enter a name value</p>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" id="email" name="email" placeholder="your#email.com" class="form-control" value="<?php echo $email;?>">
<p class="text-danger">You need to enter a valid email</p>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea id="message" name="message" rows="4" class="form-control"><?php echo $message;?></textarea>
<p class="text-danger">You need to enter a message</p>
</div>
</div>
<div class="form-group">
<label for="secCheck" class="col-sm-2 control-label">
<?php echo $_SESSION["a"] .'+'.$_SESSION["b"];?>
</label>
<div class="col-sm-10">
<input type="text" id="secCheck" name="secCheck" class="form-control">
<p class="text-danger">Answer the question above</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input type="submit" value="Send" class="btn btn-primary btn-large btn-block" id="submit" name="submit">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<?php echo $result; ?>
</div>
</div
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('form').on('submit',function(){
$(".text-danger").hide();
var holderValue = false;
$(this).find('input[type!="hidden"]').each(function(){
if(!$(this).val()){holderValue=true; $(this).parent().find(".text-danger").show();}
})
if(!$("#message").val()){holderValue=true; $(this).parent().find(".text-danger").show();};
if(holderValue){return false;}
// event.preventDefault();
// console.log('form submitted');
})
$("input").on("change paste keyup", function() {
if($(this).val()){
$(this).parent().find(".text-danger").hide();
}
});
$("textarea").on("change paste keyup", function() {
if($(this).val()){
$(this).parent().find(".text-danger").hide();
}
});
</script>

Bootstrap Custom Form
There are a couple of key Bootstrap attributes and classes needed for custom validation:
HTML
<form ... novalidate>
All <input ... required>
Remove all <p class='danger-text'>...
Replace the previous with <aside class='invalid-feedback'>
Also the tags have been changed from <div> to a more semantic tag, but it isn't required. The layout has been changed as well -- originally the layout had only one .row which now has several .form-rows (not sure if that was intentional or not, but it looks better when using .form-control).
jQuery
On each .form-control ...
$('.form-control').each(function() {...
...if the current .form-control is invalid...
if ($(this).is(':invalid')) {...
...stop the from submitting and show the invalid message...
e.preventDefault();
$(this).next('.invalid-feedback').show();...
...otherwise hide the invalid message if need be.
} else {
$(this).next('.invalid-feedback').hide();
}
Demo
$('.invalid-feedback').hide();
$('#main').on('submit', function(e) {
$('.form-control').each(function() {
if ($(this).is(':invalid')) {
e.preventDefault();
$(this).next('.invalid-feedback').show();
} else {
$(this).next('.invalid-feedback').hide();
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<main class="container">
<form id='main' class="form-horizontal" method="post" action="index.php" novalidate>
<section class="form-row">
<fieldset class="form-group col-sm-10">
<label for="name" class="control-label">
Name
</label>
<input id="name" name="name" class="form-control" type="text" placeholder="Enter your name" required>
<aside class="invalid-feedback">
You need to enter your name.
</aside>
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10">
<label for="email" class="control-label">
Email
</label>
<input id="email" name="email" class="form-control" type="email" placeholder="your#email.com" required>
<aside class="invalid-feedback">
You need to enter your email.
</aside>
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10">
<label for="message" class="control-label">
Message
</label>
<textarea id="message" name="message" class="form-control" rows="4" required></textarea>
<aside class="invalid-feedback">
You need to enter a message.
</aside>
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10">
<label for="secCheck" class="control-label">
</label>
<input id="secCheck" name="secCheck" class="form-control" type="text" required>
<aside class="invalid-feedback">
Answer the security question above.
</aside>
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" class="btn btn-primary btn-large btn-block" type="submit" value="Send">
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10 col-sm-offset-2">
<output id='result'></output>
</fieldset>
</section>
</form>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>

Change localstorage on form submit from 0 to 1

So I have the following form here
{{> header}}
<div class="container">
<form action="/dashboard/users/forms/competition-form/{{user.id}}" method="post" class="competitionformlockdown">
<h2>School Competition Form</h2>
<p>
<b>All fields with <span style="color: red">*</span> are required</b>
</p>
<div class="panel panel-default">
<div class="panel-heading">
General Information
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label for="schoolName">
School Name <span style="color: red">*</span>
</label>
<input type="text" class="form-control" name="schoolName" placeholder="Enter school name" value="{{competitions.schoolName}}" required>
</div>
<div class="form-group col-md-6 date" data-provide="datepicker">
<label for="competitionDate">
Competition Date <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionDate" name="competitionDate" placeholder="Enter the date of competition" value="{{competitions.competitionDate}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionTime">
Time <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionTime" name="competitionTime" placeholder="Enter the time of the competition (e.g. 8:00 AM)" value="{{competitions.competitionTime}}" required>
</div>
<div class="form-group col-md-12">
<label for="competitionVenue">
Venue <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionVenue" name="competitionVenue" placeholder="Enter where the competition was held" value="{{competitions.competitionVenue}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionTotalOfStudents">
Total number of students in the program <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionTotalOfStudents" name="competitionTotalOfStudents" placeholder="Enter the total number" value="{{competitions.competitionTotalOfStudents}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionTotalParticipated">
Total number of students that participated <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionTotalParticipated" name="competitionTotalParticipated" placeholder="Enter the total number" value="{{competitions.competitionTotalParticipated}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionTotalPersonnel">
Total number of school personnel involved in the program <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionTotalPersonnel" name="competitionTotalPersonnel" placeholder="Enter the total number" value="{{competitions.competitionTotalPersonnel}}" required>
</div>
</div><!-- row ends -->
</div><!-- End of panel body -->
</div><!-- School Information panel ends -->
<!-- Judge 1 Info -->
<div class="panel panel-default">
<div class="panel-heading">
Judge 1
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label for="competitionJudge1Name">
Judge's Name <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge1Name" name="competitionJudge1Name" placeholder="Enter the Judge's Name" value="{{competitions.competitionJudge1Name}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge1Telephone">
Telephone <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge1Telephone" name="competitionJudge1Telephone" placeholder="Enter the Judge's Telephone Number" value="{{competitions.competitionJudge1Telephone}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge1Email">
Email address <span style="color: red">*</span>
</label>
<input type="email" class="form-control" id="competitionJudge1Email" name="competitionJudge1Email" placeholder="judge#example.com" value="{{competitions.competitionJudge1Email}}" required>
</div>
</div>
</div><!-- end of row -->
</div>
<!-- Judge 2 Info -->
<div class="panel panel-default">
<div class="panel-heading">
Judge 2
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label for="competitionJudge2Name">
Judge's Name <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge2Name" name="competitionJudge2Name" placeholder="Enter the Judge's Name" value="{{competitions.competitionJudge2Name}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge2Telephone">
Telephone <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge2Telephone" name="competitionJudge2Telephone" placeholder="Enter the Judge's Telephone Number" value="{{competitions.competitionJudge2Telephone}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge2Email">
Email address <span style="color: red">*</span>
</label>
<input type="email" class="form-control" id="competitionJudge2Email" name="competitionJudge2Email" placeholder="judge#example.com" value="{{competitions.competitionJudge2Email}}" required>
</div>
</div>
</div><!-- end of row -->
</div>
<!-- Judge 3 Info -->
<div class="panel panel-default">
<div class="panel-heading">
Judge 3
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label for="competitionJudge3Name">
Judge's Name <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge3Name" name="competitionJudge3Name" placeholder="Enter the Judge's Name" value="{{competitions.competitionJudge3Name}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge3Telephone">
Telephone <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge3Telephone" name="competitionJudge3Telephone" placeholder="Enter the Judge's Telephone Number" value="{{competitions.competitionJudge3Telephone}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge3Email">
Email address <span style="color: red">*</span>
</label>
<input type="email" class="form-control" id="competitionJudge3Email" name="competitionJudge3Email" placeholder="judge#example.com" value="{{competitions.competitionJudge3Email}}" required>
</div>
</div>
</div><!-- end of row -->
</div>
<!-- The following fields are hidden to users and should ONLY be visible and editable by a site admin-level user. -->
{{#if user.admin}}
<div class="panel panel-danger">
<div class="panel-heading">
Administrators Only
</div>
<div class="panel-body">
<p>Sent Required Photos? (currently {{competitions.competitionRequiredPhotos}})</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="competitionRequiredPhotos" id="yesPhotosRadio" value="yes">
<label class="form-check-label" for="yesPhotosRadio">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="competitionRequiredPhotos" id="noPhotosRadio" value="no">
<label class="form-check-label" for="noPhotosRadio">No</label>
</div>
<p>Sent Required Certifications? (currently {{competitions.competitionRequiredCertifications}})</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="competitionRequiredCertifications" id="yesCertsRadio" value="yes">
<label class="form-check-label" for="yesCertsRadio">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="competitionRequiredCertifications" id="noCertsRadio" value="no">
<label class="form-check-label" for="noCertsRadio">No</label>
</div>
</div>
</div>
{{/if}}
<!-- End of fields hidden to user -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
{{> footer}}
and my current JS code
localStorage.setItem('competitionformlockdown', '0' || '1');
if(localStorage.getItem('competitionformlockdown') == '1') {
$(".competitionformlockdown input").prop('disabled', true);
$(".competitionformlockdown input[type=submit]").prop('disabled', true)
}
I want the forms to load with the value of 0 then when the form is submitted the value switches to 1 and triggers the competitionformlockdown on load and persists.
The forms are loading as 0 but the value is not switching to 1 on submit.
I'm new to localstorage so this is all new to me.
Any help is appreciated.

you can add a script tag which sets the value to zero on form load, and then after the submit you can return the script tag to set to 1.
Form load
<script>
var currentvalue = localStorage.getItem('competitionformlockdown') || '0';
localStorage.setItem('competitionformlockdown', currentValue);
</script>
On submit
localStorage.setItem('competitionformlockdown', '1');
Working fiddle

AngularJs Validation on Date doesn't work in IE and Mozilla

my problem is that when I tried to put required on my input type date which is birthdate when I input date(4/29/2016) the required still shows and it won't let me submit my form. when I tried to remove the required attribute on my birthdate input it work fine... but what I want is to make the birthdate required.... I don't know why it won't work on date while it work just fine on other required inputs like full_name, gender and email
Since html5 doesn't work in Mozilla and IE
I use plugin for it to worked.
<!--HTML5 Date and Month Input Compatibility-->
<!-- cdn for modernizr-->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<!--end of compatibility-->
<script>
webshims.setOptions('waitReady', false);
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
</script>
Submit Button
<button type="submit" form="form-customer"
class="btn btn-primary pull-right" id="cmd_insert_customer" ng-show="tab == 3">
Insert Customer
</button>
FORM
<div class="row" ng-show="tab == 3">
<div class="col-md-12">
<form name="form" ng-submit="form.$valid && insertCustomer(form)" id="form-customer" class="css-form" novalidate >
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
<img src="{{profilePic}}" id="profile_picture" class="img-responsive img-thumbnail" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="file" name="image_path" id="image" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)" />
</div>
</div>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-md-7">
<label>Full Name*
<span class="required-label" ng-show="form.$submitted || form.full_name.$touched">
<span ng-show="form.full_name.$error.required">(Full Name is required.)</span>
</span>
</label>
<input type="text" ng-model="insertProfile.full_name" name="full_name" class="form-control" required="" />
</div>
</div>
<br />
<div class="row">
<div class="col-md-7">
<label>Gender*
<span class="required-label" ng-show="form.$submitted || form.gender.$touched">
<span ng-show="form.gender.$error.required">(Gender is required.)</span>
</span>
</label>
<select name="gender" class="form-control" ng-model="insertProfile.gender" required >
<option value ="">Select Gender</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
</select>
</div>
</div>
<br />
<div class="row">
<div class="col-md-7">
<label>Birth Date*
<span class="required-label" ng-show="form.$submitted || form.birth_date.$touched">
<span ng-show="form.birth_date.$error.required">(Birthdate is required.)</span>
</span>
</label>
<input type="date" name="birth_date" class="form-control" ng-model="insertProfile.birth_date" required />
</select>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-5">
<label>Mobile #</label>
<input type="number" name="mobile" value="" class="form-control" ng-model="insertProfile.mobile" />
</div>
<div class="col-md-5">
<label>Email*
<span class="required-label" ng-show="form.email.$error.email">(Invalid email address.)</span>
<span class="required-label" ng-show="form.$submitted || form.email.$touched">
<span ng-show="form.email.$error.required">(Email is required.)</span>
</span>
</label>
<input type="email" name="email" value="" class="form-control" ng-model="insertProfile.email" required />
</div>
</div>
<br />
<div class="row">
<div class="col-md-5">
<label>City</label>
<input type="text" name="city" value="" class="form-control" ng-model="insertProfile.city" />
</div>
<div class="col-md-5">
<label>Address</label>
<textarea name="address" class="form-control" rows="4" cols="50" ng-model="insertProfile.address" ></textarea>
</div>
</div>
</form>
</div>
</div>

I think that it doesn't work because AngularJS validates the type date with ISO-8601 format which is yyyy-mm-dd. So inputing the date with yyyy/mm/dd will result in invalid format that triggers the error. Please have a read in AngularJS documentation here for further information.

Parsleyjs 2 and Bootstrap 3 input text field with addon obscuring on errors

I am currently trying to implement Parsleyjs 2.2 to work nicely with Bootstrap 3.3. But I am experiencing some problems with getting the errors displayed beneath the text-field with an addon (input-group-addon).
I have tricked a bit with the HTML/CSS to get the kind of responsive behaviour that I wanted, but here is the underlying HTML/JS:
$('.signupForm').parsley({
successClass: 'has-success',
errorClass: 'has-error',
classHandler: function(el) {
return el.$element.closest(".form-group");
},
errorsWrapper: '<span class="help-block"></span>',
errorTemplate: "<span></span>"
});
<form class="signupForm" method="post" accept-charset="utf-8" action="" data-parsley-validate="">
<div class="form-group">
<label class="control-label" for="subdomainInput">Subdomain</label>
<div class="input-group">
<span class="input-group-addon" id="subddomainAddon">https://</span>
<input type="text" class="form-control input-lg" id="subdomainInput" required="">
<span class="input-group-addon" id="subddomainAddon">.domain.com</span>
<!-- <span class="help-block">Errors appears here</span> -->
</div>
<!-- <span class="help-block">Errors should be here</span> -->
</div>
<div class="container-fluid">
<div class="row">
<span class="form-group">
<div class="col-sm-1">
<label for="nameInput" class="inlineLabel">Name</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control" id="nameInput" placeholder="John Doe" required="">
</div>
</span>
<div class="form-group">
<div class="col-sm-1">
<label for="emailInput" class="inlineLabel">Email</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control" id="emailInput" placeholder="john#example.com" required="">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<br/>
<button type="submit" class="btn btn-danger">Register</button>
</div>
</div>
</div>

You were soo close! You need to set the errors container to the .form-group as well.
errorsContainer: function(el) {
return el.$element.closest('.form-group');
},

Form submits even when i use prevent default on submit button click

what i want is that when i click on button "find reservation", the form submit should not refresh the page. Instead it should enable some fields in find reservation form underneath. But I am not able to achieve that. I am using bootstrap.
Here is my html part:-
<div class="container">
<div class="jumbotron checkInGuest">
<h3 class="h3Heading">Request for following information from guest</h3>
<form class="form-horizontal" id="checkInForm">
<div class="form-group">
<label for="reservationId" class="col-md-4">Reservation Id</label>
<div class="col-md-8">
<input type="text" class="form-control" id="reservationId" name="reservationId" required>
</div>
</div>
<div class="form-group">
<label for="dlNum" class="col-md-4">Driver License #</label>
<div class="col-md-8">
<input type="number" class="form-control" id="dlNum" min="0" name="dlNum" required>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="submit" class="btn btn-success" id="findResButton">Find Reservation</button>
</div>
</div>
</form>
<!-- Form when info is found. Initially all fields are disabled-->
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Information Found</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="resId" class="col-md-3">Reservation Id</label>
<div class="col-md-3">
<input type="text" class="form-control" id="resId" name="resId" disabled>
</div>
<label for="dlNumReadOnly" class="col-md-3">Driver License #</label>
<div class="col-md-3">
<input type="number" class="form-control" id="dlNumReadOnly" min="0" name="dlNumReadOnly" disabled>
</div>
</div>
<div class="form-group">
<label for="guestFullName" class="col-md-3">Guest Full Name</label>
<div class="col-md-3">
<input type="text" class="form-control" id="guestFullName" name="guestFullName" disabled>
</div>
<label for="email" class="col-md-3">Email</label>
<div class="col-md-3">
<input type="email" class="form-control" id="email" name="email" disabled>
</div>
</div>
<div class="form-group">
<label for="numRooms" class="col-md-3">Rooms Booked</label>
<div class="col-md-3">
<input type="number" class="form-control readable" id="numRooms" name="numRooms" disabled>
</div>
<label for="roomType" class="col-md-1">Room Type</label>
<div class=" col-md-2">
<label for="smoking">
<input type="radio" name="roomType" id="smoking" class="roomType readable" disabled> Smoking
</label>
</div>
<div class=" col-md-3">
<label for="nonSmoking">
<input type="radio" name="roomType" id="nonSmoking" class="roomType readable" disabled>Non-Smoking
</label>
</div>
</div>
<div class="form-group">
<label for="discount" class="col-md-3">Discount</label>
<div class="col-md-3">
<select class="form-control readable" id="discount" disabled>
<option selected>0%</option>
<option>10%</option>
<option>20%</option>
<option>30%</option>
</select>
</div>
<label for="checkInDate" class="col-md-3">CheckIn Date</label>
<div class="col-md-3">
<input type="date" class="form-control readable" id="checkInDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<label for="checkOutDate" class="col-md-3">CheckOut Date</label>
<div class="col-md-9">
<input type="date" class="form-control readable" id="checkOutDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="roomOrdButton">Confirm Room Order</button>
</div>
</div>
</form>
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Final Room Order</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="perInEachRoom" class="col-md-12">Number of people in each room</label>
<div class="col-md-8 " id="perInEachRoom">
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="checkInButton">Check In</button>
</div>
</div>
</div>
</form>
</div>
</div>
And this is jquery part:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
</script>

You need to put your code in a document.ready() function, so:
$(document).ready(function() {
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
});
You should also have a look at this question: Form is submitted when I click on the button in form. How to avoid this?
Long story short, you should use
<button type="button"...
not
<button type="submit"...

Actually, all I did is:-
$("#checkInForm").submit(function(e)
{
e.preventDefault();
});
And that solved it. I didnt have to change button type or anything. Basically, in future when I will make AJAX calls I will have the code underneath preventDefault statement.