Replace onKeyUp with onBlur jquery - javascript

<input class="text empty" type="text" size="20" name="Email" id="Email" value="" onkeyup="checkconditions(this.value, this.name, this.type);">
How to change onKeyup with on blur using jquery so user will get validation message on leaving the email field?

Use jQuery blur() and set onkeyup to null like in the snippet below.
$(document).ready(function() {
document.getElementById('Email').onkeyup = null;
$('#Email').blur(function() {
checkconditions(this.value, this.name, this.type);
});
});
function checkconditions(v, n ,t) {
alert('Blur');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="text empty" type="text" size="20" name="Email" id="Email" value="" onkeyup="checkconditions(this.value, this.name, this.type);">

Replace
<input class="text empty" type="text" size="20" name="Email" id="Email" value="" onkeyup="checkconditions(this.value, this.name, this.type);">
with
<input class="text empty" type="text" size="20" name="Email" id="Email" value="" onBlur="checkconditions(this.value, this.name, this.type);">

Related

REQUIRED triggering VALIDATION

Okey comunity,
I need help with my code, so this is my form code
<form action="input.php" method="POST">
<input type="text" class="input" name="firstname" placeholder="First Name" required>
<input type="text" class="input" name="lastname" placeholder="Last Name" required=""><br>
<input type="text" class="input lower" name="streetnumber" placeholder="Street / Number" required=""><br>
<input type="text" class="input lower" name="city" placeholder="City" required=""><br>
<input type="text" class="input lower" name="country" placeholder="Country" required=""><br>
<button type="submit">Add User</button>
</form>
All I want to do is to ask if my 'required' in input can trigger validation. Type of validation I need basicly is NOT NULL and I want to have paragraph above each input to show up with text (This filed is a must).
If you find my question confusing please write a comment and I will provide more info.
I know I must use some JS code, but I would realy be glad if you can help me with that code and tell me what I need.
Best regards comunity
var country = document.getElementById("country").value;
var p = document.getElementById("pcountry");
if (!country) {
pn.classList.add("show");
return false;
} else {
return true;
}
This is my answer

How to get a list containing all input labels available in a form

I want a list containing all labels avaliable in a form, or just a way to loop through them all, and then check the text of one-by-one.
I tried first:
$('label').each(function() {
console.log(this); // this was to test :/
});
and later some variations:
$('input').labels().each(function() { ... });
$('label').siblings().each(function() { ... });
None worked on this form:
<form class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">
<label for="id_cnpj">Cnpj:</label>
<input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">
<label for="id_cpf">Cpf:</label>
<input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">
<label for="id_rg">Rg:</label>
<input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">
<label for="id_federation_unity">Federation unity:</label>
<select name="federation_unity" class="form-control" required="" id="id_federation_unity">
and much more ....
</form>
references: .labels(), .siblings()
How could I do it?
EDIT
I commited a big noob fault here and I'm sorry.
I found out what was going wrong.
I should have put the entire code like this in first place:
<!doctype html>
<html>
<body>
<form class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">
<label for="id_cnpj">Cnpj:</label>
<input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">
<label for="id_cpf">Cpf:</label>
<input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">
<label for="id_rg">Rg:</label>
<input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">
<label for="id_federation_unity">Federation unity:</label>
<select name="federation_unity" class="form-control" required="" id="id_federation_unity">
</form>
<script src="jquery-3.2.1.min.js" rel="javascript"></script>
<script type="javascript">
$('label').each(function() {
console.log(this);
});
</script>
</body>
</html>
THE PROBLEM
I changed <script type="javascript">jquery code here</script> by removing the type="javascript" attribute and it worked. I think the usage of type="javascript" is viable only when the <script>tag is defined inside <head> tag.
Another thing: I tested the version $('label').siblings().each(function() { ... }); and it worked as well.
I'm greatful for the time and effort you all had in helping me out with the first problem submitted.
Select the form-group class and label and iterate using each , .text() method will return the text content of the label. trim() to remove any white space
$(".form-group label").each(function(i, v) {
console.log($(v).text().trim())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">
<label for="id_cnpj">Cnpj:</label>
<input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">
<label for="id_cpf">Cpf:</label>
<input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">
<label for="id_rg">Rg:</label>
<input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">
<label for="id_federation_unity">Federation unity:</label>
<select name="federation_unity" class="form-control" required="" id="id_federation_unity"></select>
</form>
Maybe you were not able to do that because you had an unclosed select tag, as what I understood you want to iterate through all the labels in the form and want to access the siblings of the label too, i have added a code below see if that is what you wanted. I am printing the label text and the id of the next element to the label i.e input
$(document).ready(function() {
var labels = $("form label");
labels.each(function() {
console.log("Label Text " + $(this).text() + " ", "Next element id =" + $(this).next().attr('id'));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">
<label for="id_cnpj">Cnpj:</label>
<input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">
<label for="id_cpf">Cpf:</label>
<input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">
<label for="id_rg">Rg:</label>
<input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">
<label for="id_federation_unity">Federation unity:</label>
<select name="federation_unity" class="form-control" required="" id="id_federation_unity">
</select>
and much more ....
</form>

jquery enable submit button when all fields are complete including date field

I have the following html:
<form >
<input type="text" name="username" id="username" value="" placeholder="User name" />
<input type="password" name="password" id="password" value="" placeholder="Password" />
<input type="password" name="password" id="confirm_password" value="" placeholder="Confirm Password" />
<input type="email" name="email" id="email" value="" placeholder="Email" />
<input type="text" name="firstname" id="firstname" value="" placeholder="First name" />
<input type="text" name="lastname" id="lastname" value="" placeholder="Last name" />
<input type="date" name="date" id="date" placeholder="date" />
<ul class="actions align-center">
<li><input type="submit" value="Register" id="register" disabled="disabled"/></li>
</ul>
</form>
Also the following javascript:
(function() {
$('form input').keyup(function() {
var empty = false;
$('form input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
I can get button to be disabled then enabled without date input, but as soon as i put in the date input, the button does not become enabled. Why is this?
Edit: it works but user has to type in date, but how can i enable it when user just selects date by clicking?
jsfiddle link
It's because you are using the keyup event but when you click a date, that's not a key up event. This can be solved by changing keyup to change.
$('form input').change(function() {
https://jsfiddle.net/hn6tf36L/1/

Error with form validation

I'm having errors in validation of my form.
Here's the javascript:
function ValidateForm(){
email=document.getElementbyId("email").value;
confirmemail=document.getElementById("confirmemail").value;
password=document.getElementById("password").value;
confirmpassword=document.getElementById("confirmpassword").value;
errors = " ";
if (email == " ") {
erros += "Please enter your email \n";
}
emailcheck = /^.+#.+\..{2,4}$/;
if (email.match(emailcheck)) { }
else {
errors += "Please check your email \n";
}
if (email.match(confirmemail)) {}
else {
errors += "Email don't match \n";
}
if ( errors != "") {
alert(errors);
}
else { }
}
And here's the form part of HTML:
<form action="/LoginData/" method="post">
<label>Email</label>
<input id="email" type="email" autocomplete="on" placeholder="Your email id" name="email" required>
<label>Confirm Email</label>
<input id="confirmemail" type="email" autocomplete="off" placeholder="Confirm your Email id" name="confirmemail" required>
<br/>
<br/>
<label>Password</label>
<input id="password" type="password" name="password" placeholder="Password" required>
<label>Confirm Password</label>
<input id="confirmpassword" type="password" name="confirmpassword" placeholder="Confirm your Password" required>
<br/>
<br/>
<input type="submit" name="submit" value="Create Account">
</form>
It doesn't show the alert message even if i fill the fields with wrong input.
(Note: i'm using external JavaScript file)
I'm using the javascript for IE8 because i want to make the webpage run properly on it.
And it doesn't show the alert for any of the fields in IE.
A example of what i'm trying to build: 1http://aharrisbooks.net/jad/chap_07/validate.html
You need to call ValidateForm() in you code.
In this scenario calling it on submit will be the best option something like onsubmit="return validateForm()";
Also it has camel case problem. Should be getElementById instead of getElementbyId. Check your syntax Errors in browser console.
You must put
onsubmit="return validateForm()"
So
<form action="/LoginData/" method="post" onsubmit="return validateForm()">
<label>Email</label>
<input id="email" type="email" autocomplete="on" placeholder="Your email id" name="email" required>
<label>Confirm Email</label>
<input id="confirmemail" type="email" autocomplete="off" placeholder="Confirm your Email id" name="confirmemail" required>
<br/>
<br/>
<label>Password</label>
<input id="password" type="password" name="password" placeholder="Password" required>
<label>Confirm Password</label>
<input id="confirmpassword" type="password" name="confirmpassword" placeholder="Confirm your Password" required>
<br/>
<br/>
<input type="submit" name="submit" value="Create Account">
</form>
in the form tag in order to use your custom validation before submitting data.
You currently use HTML5 validation tag's so even if your cusom JS function is not called, you should see HTML5 validation with new browsers. You can see browsers that are more compliant than others with HTML5 : http://caniuse.com/#search=html5.

Show Text inside input both "Username" and "Password" until user starts to type

I am working with PHP to display my log in form. Right now, the form shows "Username" but the text doesn't go away when the user starts to type. How can I have the text go away when the user starts to type so that the text "Username" doesn't overlap whatever they are typing?
Here is my "Username" code
<p class="infield grouptop">
<input type="text" name="user" id="user" placeholder=""
value="<?php p($_['username']); ?>"<?php p($_['user_autofocus'] ? ' autofocus' : ''); ?>
autocomplete="on" required/>
<label for="user" class="infield"><?php p($l->t('Username')); ?></label>
<img class="svg" src="<?php print_unescaped(image_path('', 'actions/user.svg')); ?>" alt=""/>
</p>
Here is my "Password" code
<p class="infield groupbottom">
<input type="password" name="password" id="password" value="" placeholder=""
required<?php p($_['user_autofocus'] ? '' : ' autofocus'); ?> />
<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
<img class="svg" id="password-icon" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/>
</p>
I'd like to achieve the same thing for the password form.
<input type="password" placeholder="enter the password" onClick="this.value='';">
or
<input type="password" placeholder="enter the password" onClick="this.select();">
if it already have some value you can remove it onClick also or select it and automatically replaces when you start typing
You are looking for html placeholders.
http://www.w3schools.com/tags/att_input_placeholder.asp
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
Use placeholder for latest browsers
<input type="password" placeholder="Your Text" onClick="this.value='';" >
For older browsers you can use jquery you can do like this. from this site Placeholder with Jquery
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});

Categories