Ik heb onderstaand script. Als ik 1 van de 2 velden niet invul krijg ik netjes een error. Vul ik het veld in wat nog niet ingevuld was krijg ik nog een keer een foutmelding en klik ik voor de 2e keer dan pas gaat het goed.
Iemand een idee wat ik verkeerd doe?
Form:
<form id="formid" method="POST" action="/">
<div>
<label class="title">Title</label>
<div id="titleError"></div>
<input type="text" id="title" name="title" value="">
</div>
<div>
<label class="title">Text</label>
<div id="textError"></div>
<textarea name="text" id="text" rows="14" cols="50"></textarea><br />
</div>
<div>
<input class="btn btn-success" type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
$(document).ready(function() {
$("#formid").submit( function(event) {
var title = $('#title').val();
var text = $('#text').val();
if( title.lenght === 0 || text.length === 0 ){
if( title.length === 0 ){
$("#titleError").html("<p>Title verplicht</p>");
return false;
}
if( text.length === 0 ){
$("#textError").html("<p>Text verplicht</p>");
return false;
}
//$("html, body").animate({ scrollTop: 0 }, 600);
}
else{
tinyMCE.triggerSave();
/* stop form from submitting normally */
event.preventDefault();
/* Send the data using post */
var posting = $.post( 'http://xxx.nl/admin/pages/create', {
title: $('#title').val(),
text: $('#text').val()
});
/* Put the results in the show-content div */
posting.done(function( data ) {
//alert(data);
$.ajax({
url: "<?php echo base_url() ?>/admin/pages",
type: 'GET',
success: function(data) {
$("#show-content").hide().html( data).fadeIn(1500);
}
,
error: function() {
alert("error");
}
});
});
}
//return false;
});
});