I'm making a form to change the password.
I ask for the current password and then there are two fields to put the new password.
I have two problems:
First: I need to check if the two fields of the new password are equal.I used onsubmit to check that.If they are the same, submit.If not it should show a message saying something.The problem is that it doesn't display.This is the code:
function checkform(){
var pass=myForm.pass.value;
var new=myForm.new.value;
var new=myForm.new2.value;
if(new!=new2){
document.getElementById("message").style.display='block';
document.getElementById("pass").value=" ";
document.getElementById("new").value=" ";
document.getElementById("new2").value=" ";
return false;
}else{
return true;
}
}
When I insert diferent new passwords it still submits, but if I delete that document.getElementById it doesn't submit.
Second problem: I have a php page (not using frameworks, just php) that is a class.When I want to acess a function of that class all I need to do is
include("class.php");
$my = new the_class(); $response= $my->check();`
The check() function retrives the password, so then I can check if the value from the field pass is the same as the $response.But how can I put this on the function checkform()? It doesn't work this way.
Don't take the variable name as new its a keyword it is reserved for creating an instance, so better take some other name to the variable and you may get what you're looking for.
**You Try below code**
function checkform(){
var pass=myForm.pass.value;
var new=document.getElementById("new").value();
var new=document.getElementById("new2").value();
if(new!=new2){
document.getElementById("message").style.display='block';
document.getElementById("pass").value=" ";
document.getElementById("new").value=" ";
document.getElementById("new2").value=" ";
return false;
}else{
return true;
}
}
Related
I have multiple input type text on jsp form for each the range is defined to the next input type textbox i want to validate with the defined range and if the value beyond the range validation function ask for pop confirmation if user enter userid in text that compare with session value ie 'user' then the validation function allow user to submit form with return true and not ask again for that filed validate .how can i achieve this using javascript function.any other way that can i achieve same using javascript .Request you to Suggest Option with example code.
JavaScript code:-
if(document.getElementById('pH'+formid).value !=0)
{
var user;
var value=document.getElementById('pH'+formid).value;
var maxmin=document.getElementById('pHspecf'+formid).value.split('-');
var max=maxmin[0];
var min=maxmin[1];
if(value<min||value>mix)
{
alert("max-"+max+" min-"+min+" value of parameter-"+value);
var c=confirm("Entered Value Beyond the Specification Range.\n DO you Still Want To continue Press Yes..!");
if (c==true)
{
var person=prompt("Please enter your Username","Your User name");
if (person!=null)
{user=person;
alert("Hello "+person+" Your Request Is Accepted..!");
}else{
document.getElementById('pH'+formid).style.backgroundColor = "lightblue";
document.getElementById('pH'+formid).focus();
return false;
}
}
else
{
document.getElementById('pH'+formid).focus();
return false;
}
}
}
I have a form with id='form1' as well as another one with 'form2'. On submit, i want to pass both forms as objects to a single validate function which can validate them. I am confused on how to do this.
If i do something like
var form = $('#form1');
Validate(form);
how do i access the text-fields of the variable form?
i don't want to write duplicate validate functions as both forms are ALMOSt similar.
You can do following also...
A Complete example is here...
function validate(formid){
var form = $("#"+formid);
var name = form.find("#name");
var number = form.find("#number");
alert(name.val());
alert(number.val());
}
validate("form1");
validate("form2");
Try .find. Your form will serve as the context and you could reuse it for different forms.
See below:
var form = $('#form1');
function Validate(form){
var field1 = form.find(".field1");
}
With the name of the fields, you can do this:
function Validate(form) {
form = form[0]; // raw element
if (check_syntax(form.name.value)) { doSomething(); }
if (check_syntax(form.email.value)) { doSomething(); }
if (check_syntax(form.anotherfield.value)) { doSomething(); }
}
If every field in the form has a name, you can access it via form.fieldName or form['fieldName'].
Regards.
Assuming both forms are similar:
ValidateForm($("#form1, #form2"));
function ValidateForm(forms){
forms.each(function(){
$(this).find('input[type=text]').each(function(){
//Do something to validate text field
})
$(this).find('input[type=checkbox]').each(function(){
//Do something to validate checkbox
})
})
}
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.
<script>
function validate(){
u=document.CustomerLogin.UserName.value;
p=document.CustomerLogin.Password.value;
rp=document.CustomerLogin.RePassword.value;
if (u==""){
document.write("Enter a unique username");
return false;
}
if (p!=rp){
document.write("Retype Password Incorrect");
return false;
}
return true;
}
</script>
The messages are printed on separate page but i want them to be printed at the same place in front of text box! Please help. Thanks!
Never use Document write, it's hazardous...
document.getElementById("anidofanElementinthePage").innerHTML = " string to add by javascript";
<script>
function validate(){
u=document.CustomerLogin.UserName.value;
p=document.CustomerLogin.Password.value;
rp=document.CustomerLogin.RePassword.value;
if (u==""){
document.getElementById("theIdOfyourTextBlocInForm").innerHTML = "Enter a unique username";
return false;
}
if (p!=rp){
document.getElementById("theIdOfyourTextBlocInForm").innerHTML = "Retype Password Incorrect";
return false;
}
return true;
}
</script>
document.write will simply append the message to the end of the page. The simplest solution would be change it to an alert like this:
if (u==""){
alert("Enter a unique username");
return false;
}
Otherwise you will need to create new DOM elements(either before hand or when an error is detected) to hold the message and position them next to the inputs
you would need to detect text change. One way is to use this:
<input name="blah" onchange="validate()" ... />
EDIT
To add text on the same page, include the script using <script src=...> and then add <div id='validation[i]'></div> next to each of the inputs where [i] is increased by 1 each time (so validation1 validation2 so on). Then, use getElementById('validation[i]').innerHtml to change the value.
I have this javascript which is working great -
var employeename = $("#employeename");
var employeenameInfo = $("#employeenameInfo");
employeename.blur(validateEmployeename);
function validateEmployeename(){
//if it's NOT valid
if(employeename.val().length < 4){
employeename.addClass("error");
employeenameInfo.text("We want names with more than 3 letters!");
employeenameInfo.addClass("error");
return false;
}
//if it's valid
else{
employeename.removeClass("error");
employeenameInfo.text("Full Name.");
employeenameInfo.removeClass("error");
return true;
}
}
However instead of having a big list of this functions for all my different fields I want to pass a field in e.g.
function validateGeneric(field){
However whatever I try just gives me errors and I'm really stuck. Any help appreciated. This also brings up another problem with the info field, any way I can store the orginal text and just restore that instead of a new string?
You can get the field that triggered the event using $(this). also you should put the info field as a sibling with an info class
$('input.to_be_validated').blur(validateInput);
function validateInput(e){
var input = $(this)
var info = input.parent.find('.info')
//if it's NOT valid
if(input.val().length < 4){
input.addClass("error");
info.text("We want names with more than 3 letters!");
info.addClass("error");
return false;
}
//if it's valid
else{
input.removeClass("error");
info.text("Full Name.");
info.removeClass("error");
return true;
}
}
Edit: forgot about the info field
All you need to do is to reference the field var you'd pass into your function, therefore your code becomes:
function validateEmployeename(field, fieldinfo){
//if it's NOT valid
if(field.val().length < 4){
field.addClass("error");
fieldinfo.text("We want names with more than 3 letters!");
fieldinfo.addClass("error");
return false;
}
//if it's valid
else{
field.removeClass("error");
fieldinfo.text("Full Name.");
fieldinfo.removeClass("error");
return true;
}
}
You may also use multiple selectors:
$("input[name='employeename'], input[name='employeename2']").blur(function() {
// put your validation routine for fields that should contain names
$(this).next("#employeenameInfo").html("info here"); // note that you don't have unique id here, better to find element you want to put your error message by tagname/class, like "span.error"
});
$("input[name='employeemail'], input[name='employeemail2']").blur(function() {
// put your validation routine for fields that should contain email addresses
$(this).next("#emailInfo").html("info here"); // note that you don't have unique id here, better to find element you want to put your error message by tagname/class, like "span.error"
});
That way you don't need to pass anything to validation functions, everything will be resolved around $(this), providing you've got proper elements to fill your error messages nearby:
<input type="text" name="employeename" />
<span class="error" />