Get name of form element - javascript

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

Related

Filter value on .keyup method JQuery

I have two fields (username and email) and I want to auto-fill the username with the content of the email field, because username is a hidden input.
I just need the contentent before #domain.com. Right now I'm using the .keyup() but I can use the .change() too.
How can I only get the content before #domain.com?
$('#id_email').keyup(function () {
$('#id_username').val($(this).val());
});
EDIT: All answers Works perfectly, thank you so much.
Kinda simplistic but can you do something like
var email = "test#example.com";
var username = email.split('#')[0];
so:
<script>
$('#id_email').change(function () {
var email = $(this).val();
$('#id_username').val(email.split('#')[0]);
});
</script>
It will work but, of course, assumes a valid email address.
An edited version of Dustin Simpson answer, just because I believe that input it's better for this kind of stuff instead of keyup or change, and also we don't need to store any email variables.
$('#id_email').on('input',function(){
$('#id_username').val($(this).val().split('#')[0]);
});
Check the fiddle
Try this
$('#id_email').keyup(function () {
var usr = $(this).val();
var usr = usr.split('#');
$('#id_username').val(usr[0]);
});
See how split works:
http://www.w3schools.com/jsref/jsref_split.asp
try this one...
$('#id_email').keyup(function () {
$('#id_username').val($(this).val().split('#')[0]);
});

form onsubmit doesn't work end changing value of input

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;
}
}

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();

Referencing a form assigned to a variable in jQUERY

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
})
})
}

check if input field is empty with html5 and 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");
}
});

Categories