JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://lcoawebservices.com/assets/ckeditor/ckeditor.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://lcoawebservices.com/assets/lcoastyles.css">
<form action="../../scripts/upload-job.php" method="post" id="add-job" class="form-all">
<p class="req">All Fields are Required</p>
<label>Description</label>
<textarea name="desc" class="required" id="desc"></textarea>
<script>
CKEDITOR.replace('desc');
</script>
<br />
<input name="submit" type="button" value="Submit Job" class="button" id="job-submit" />
<input name="clear" type="reset" value="Clear Form" class="button" />
</form>
CSS
html, body {
width: 100%;
}
form {
margin: 10px 0 0 0;
}
#job-upload-content h2 {
font-size: 13px;
font-weight: bold;
}
#header {
text-align: left;
padding: 0;
margin: 0 auto;
position: relative;
height: 55px;
width: 980px;
}
#job-upload-content {
width: 980px;
margin: 0 auto;
text-align: left;
}
form#add-job {
width: 500px;
}
span#remove, span#add {
cursor: pointer;
color: #ff6633;
text-decoration: underline;
}
#remove-job {
display: none;
}
p.req, label.error {
font-size: 10px;
color: red;
font-style: italic;
}
input.error, select.error {
border: 1px solid red;
}
#add-job input, #add-job select {
display: inline-block;
margin: 0 10px 20px 0 !important;
}
.error {
display: inline-block;
vertical-align: top;
}
select, select.error {
margin: 0 10px 10px 0 !important;
}
JavaScript
$(document).ready(function () {
var FormAllClass = '.form-all';
var IsValid = function () {
$(FormAllClass).validate();
$('#desc').rules("add", {
required: true,
messages: {
required: "Description is required."
}
});
$(FormAllClass).valid();
};
//IsValid() //Working
$('#job-submit').on('click', function(){
if (IsValid())//not working
{
}
})
});