check if input field is empty with html5 and javascript - javascript

How can i check if a html5 input field is empty? I am trying to override the native validation message given by using a required text input.
This is how my code looks now:
<script>
$(document).ready(function(){
H5F.setup(document.getElementById("contact-form"));
var name = document.getElementById("contact-name")
if (name.value === "") {
name.setCustomValidity("Please fill out the field with your name");
}
});
</script>

Here what u need.. a full guide about how to change this native validation message :D
http://afarkas.github.io/webshim/demos/demos/forms.html#Locale-Settings

Wrapping your code in a blur listener should do the trick.
var name = document.getElementById("contact-name");
$(name).blur(function(){
if (name.value === "") {
name.setCustomValidity("Please fill out the field with your name");
}
});

Related

How to impose a required textbox in javascript

I have a problem with my chat.
Indeed, I have a text input with the required value.
When I click on Send, it returns empty instead of stopped sending...
Can you help me please ?
<script>
$("#submitmsg").click(function() {
var clientmsg = $("#usermsg").val();
$.post("chat-post.php", {
text: clientmsg
});
$("#usermsg").attr('required', true);
loadLog;
return false;
});
</script>
you could validate the input string like this if(clientmsg.trim()) .Better add the required=true in your html code
<input type='text' required="true">
And use with trim() they will remove the unwanted space from string
<script>
$("#submitmsg").click(function() {
var clientmsg = $("#usermsg").val();
if(clientmsg.trim()){
$.post("chat-post.php", {
text: clientmsg
});
loadLog;
}
return false;
});
</script>
Basically you need to add a condition before sending post request if the value of that message input is empty. Please check below :
<script>
$("#submitmsg").click(function() {
var clientmsg = $("#usermsg").val();
// This is the additional condition
if(clientmsg != '' || clientmsg != null){
$.post("chat-post.php", {
text: clientmsg
});
}
else{
alert('Please enter the message!');
}
$("#usermsg").attr('required', true);
loadLog;
return false;
});
</script>
In order for the required attribute to work, you need to have the input inside a form.
<form>
<input required type="text" />
</form>
I think there is simply no need to set the required attribute every time you click the button. You only need to do it once, so why not simply add the required attribute in the html?
Even if you don't want to add it in the HTML, just add it once.
<script>
$("#usermsg").attr('required', true); // Add the attribute required to the input
// Do the AJAX function after you submit the form.
// Before submitting, it will have to be validated, so you don't even have to validate it in JS. Just native HTML5
$("form").submit(function() {
// do the rest here
}
</script>

validation of password field using a compare to string method or using an == but both not working

iam trying to validate the password field with the re-type password field but its not working :
function Signup() {
alert('step one')
var q=SignUppasswordField.val();
var z=SignUpRetypepasswordField.val();
if(q.toString()==z.toString()){
alert('valid')
var name= $('#SignUpName').val();
var UserName=$('#SignUpUserName').val();
var UserPassword=$('#SignUppasswordField').val();
var EmailAddress=$('#SignUpEmail').val();
callServer('successAdd','checkConnection',false,'addMember.php',{name:name,UserName:UserName,UserPassword:UserPassword,EmailAddress:EmailAddress});
}
else {
alert('not valid');
alert("please check entered info.")
}
}
I think you will need to use JQuery selector when assigning q and z using JQuery val()
Or put another way, val() is not defined for HTML DOM ELEMENT
var q=$('#SignUppasswordField').val();
var z=$('#SignUpRetypepasswordField').val();

Anyone of two textfield validation

I have a forgot password form. It has two fields 1) email and 2) mobile. So what I need is a validation for it. like both field should not be empty, both field should not be filled, any one only should be filled. email should be in email format and mobile should only contain numbers.
javascript Code:
function validate_fgtmgrpwd(){
var adminid=document.f_mgr_password.mgrid;
var adminmobile=document.f_mgr_password.mgrmobile;
var mgr_length=document.f_mgr_password.mgrmobile.value;
if ((document.f_mgr_password.mgrid=="Ex: ManagerID#Email.com")||
(document.f_mgr_password.mgrid==""))
{}
{document.getElementById("validationMessage").innerHTML=" <font color='#FF0000'>Error: </font> Please Enter Either Email Id Or Mobile No:!";
popup('validationPopup');
mgrid.focus();
return false;
}
}
You should do the validation server side, not client side. There are always ways to get around your javascript form validation.
So you should check/validate the POST values in your php script, and act accordingly.
With html5 you can define an input type="email" for your email field ( so it parse properly inserted email ) and an input type="tel" for your mobile phone field. So, set the clear field at onfocus event for the other field. this should works fine.
Try this:
function validate_fgtmgrpwd() {
var adminid = document.f_mgr_password.mgrid,
adminmobile = document.f_mgr_password.mgrmobile,
emailExp = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/gi,
phoneExp = /^[0-9\-\+]{9,15}$/gi;
if(!adminid.value.length && !adminmobile.value.length){
alert("At Least one field is mandatory!");
adminid.focus();
return false;
} else {
if(adminid.value.length && !emailExp.test(adminid.value)){
alert("Enter a valid email");
adminid.focus();
return false;
} else if(adminmobile.value.length && !phoneExp.test(adminmobile.value)) {
alert("Enter a valid phone number");
adminmobile.focus();
return false;
} else {
return true;
}
}
}
For HTML5 supporting browsers, native validation will work and for other browsers, custom validation will work.
jsfiddle: http://jsfiddle.net/MR6bD/2/

Get name of form element

i have this simple JS for validating form, can someone tell me how to get name of field (you know, name=""), it should be where NameOfSomefield is now :S I tried with someField.tagName but no luck...
function validateForm(){
var someField = document.forms["nameofofrm"]["someField"].value;
if (someField==null || someField=="") {
alert("You cannot leave blank this field: ".NameOfSomefield);
return false;
}
}
var name = element.getAttribute("name");
If you want a jQuery approach, you may use:
let elementName = $('#element_id').attr('name')
You can find more information about jQuery selectors here

Focus on first invalid text field after form validation

I have a pretty standard HTML form in which I collect user input. I have a submit button that will run a JavaScript function (onClick) that in turn validate the data entered by the users.
The function looks like this:
function validateForm()
{
var isValid = true;
var txtFirstname = document.getElementById("firstName").value;
var txtLastname = document.getElementById("lastName").value;
(etc...)
/*Validate First Name*/
if(txtFirstname.length <= 0){
document.getElementById("lblFirstName").innerHTML=" *";
isValid = false;
}
else{
document.getElementById("lblFirstName").innerHTML="";
document.getElementById("firstName").value = txtFirstname;
}
/*Validate last Name*/
if(txtLastname.length <= 0){
document.getElementById("lblLastName").innerHTML=" *";
isValid = false;
}
else{
document.getElementById("lblLastName").innerHTML="";
document.getElementById("lastName").value = txtLastname;
}
(etc...)
if(isValid){
document.formX.submit();
}
else{
return false
}
}
My question is: how can I set the focus on the first "invalid" textbox after the function has validated the form?
Thanks,
Eric
i search 4 it & find a better popular solution :
`$("#"+document.querySelectorAll(":invalid")[1].id).focus();`
it's work for me. note that index of first invalid input in Firefox is 1 not 0. because of in FF the form is invalid and count, when an invalid input exist.
It would be cleaner if you functionally decomposed your validation. Then you could have a variable called "firstInvalidField" which is initially set to null. Upon invalidation of a field, check to see if firstInvalidField is null, if it is, set it to the textBox in question. If it is not null, skip over the code.
After the validation is complete, if the firstInvalidField variable is not null, call .focus() on it.

Categories