How could I use jQuery to check if text-fields are empty when submitting without loading login.php?
<form action="login.php" method="post">
<label>Login Name:</label>
<input type="text" name="email" id="log" />
<label>Password:</label>
<input type="password" name="password" id="pwd" />
<input type="submit" name="submit" value="Login" />
</form>
Thanks.
You can bind an event handler to the "submit" JavaScript event using jQuery .submit method and then get trimmed #log text field value and check if empty of not like:
$('form').submit(function () {
// Get the Login Name value and trim it
var name = $.trim($('#log').val());
// Check if empty of not
if (name === '') {
alert('Text-field is empty.');
return false;
}
});
You can use 'required' http://jsbin.com/atefuq/1/edit
<form action="login.php" method="post">
<label>Login Name:</label>
<input required type="text" name="email" id="log" />
<label>Password:</label>
<input required type="password" name="password" id="pwd" />
<input required type="submit" name="submit" value="Login" />
</form>
A simple solution would be something like this
$( "form" ).on( "submit", function() {
var has_empty = false;
$(this).find( 'input[type!="hidden"]' ).each(function () {
if ( ! $(this).val() ) { has_empty = true; return false; }
});
if ( has_empty ) { return false; }
});
Note: The jQuery.on() method is only available in jQuery version 1.7+, but it is now the preferred method of attaching event handlers.
This code loops through all of the inputs in the form and prevents form submission by returning false if any of them have no value. Note that it doesn't display any kind of message to the user about why the form failed to submit (I would strongly recommend adding one).
Or, you could look at the jQuery validate plugin. It does this and a lot more.
NB: This type of technique should always be used in conjunction with server side validation.
has_empty according to the value of the last input on the form?has_empty to false and then loop through each input in the form. If any input is empty, we set has_empty to true and break the loop (that's what the return false is about). Then we simply check the value of has_empty and conditionally return false to prevent form submission if there are empty fields.you need to add a handler to the form submit event. In the handler you need to check for each text field, select element and password fields if there values are non empty.
$('form').submit(function() {
var res = true;
// here I am checking for textFields, password fields, and any
// drop down you may have in the form
$("input[type='text'],select,input[type='password']",this).each(function() {
if($(this).val().trim() == "") {
res = false;
}
})
return res; // returning false will prevent the form from submitting.
});
I really hate forms which don't tell me what input(s) is/are missing. So I improve the Dominic's answer - thanks for this.
In the css file set the "borderR" class to border has red color.
$('#<form_id>').submit(function () {
var allIsOk = true;
// Check if empty of not
$(this).find( 'input[type!="hidden"]' ).each(function () {
if ( ! $(this).val() ) {
$(this).addClass('borderR').focus();
allIsOk = false;
}
});
return allIsOk
});
you should try with jquery validate plugin :
$('form').validate({
rules:{
email:{
required:true,
email:true
}
},
messages:{
email:{
required:"Email is required",
email:"Please type a valid email"
}
}
})
function isEmpty(val) {
if(val.length ==0 || val.length ==null){
return 'emptyForm';
}else{
return 'not emptyForm';
}
}
$(document).ready(function(){enter code here
$( "form" ).submit(function( event ) {
$('input').each(function(){
var getInputVal = $(this).val();
if(isEmpty(getInputVal) =='emptyForm'){
alert(isEmpty(getInputVal));
}else{
alert(isEmpty(getInputVal));
}
});
event.preventDefault();
});
});
var save_val = $("form").serializeArray();
$(save_val).each(function( index, element ) {
alert(element.name);
alert(element.val);
});
