I have a text field, which i check to make sure the text field is not empty before submission, which work fine.
How do I make sure that it only checks for the id="Name" text field is not empty and ignore the other text field.
<input type="text" class="form-control" id="Name" aria-label="Name" placeholder="Name" required >
<input type="text" class="form-control" id="address" aria-label="address" placeholder="address">
<input type="text" class="form-control" id="zip" aria-label="zip" placeholder="zip" >
JS
$('input:text').val().length;
Target the element by ID,
$('#Name').val().length;
Did you try this?
$('#Name').val().length;
You have set attribute required to the input with ID Name so form won't submit unless it has some value. If you want to check for whitespaces you can use jquery $.trim() method:
$('form').submit(function(e) {
var name = $('#Name').val();
if ($.trim(name) === '') {
e.preventDefault();
return false;
}
console.log('form submited!');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" class="form-control" id="Name" aria-label="Name" placeholder="Name" required />
<input type="text" class="form-control" id="address" aria-label="address" placeholder="address" />
<input type="text" class="form-control" id="zip" aria-label="zip" placeholder="zip" />
<input type="submit" value="submit" />
</form>
Related
I want to pass in different element IDs with the same function
function validate(idname, spnname) {
var getId = document.getElementById(idname);
if(getId === null || getId === undefined || getId === "") {
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
validate('firstname', 'spnfirstname');
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get" >
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br />
<input type="text" name="lname" placeholder="Last Name" s="textbox" id="lastname"/><span id="spnlastname"></span><br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br />
//is there another way to do this onClick event in javascript that may help?
<input id ="btn" type="button" value="Submit" onClick = "return validate()"/>
</form>
</div>
I am receiving an error for my second var and my html onClick. My question is different because there is no answer here responding to this issue correctly. I have tried everything. I have no idea why I am getting this error message.
Two things:
1.- Use the 'value' property to get the actual value from the input:
var getId = document.getElementById(idname).value;
2.-Set the function to the 'click' event, addEventListener can be useful if you want to use plain javaScript, just right after the form:
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
This is how i get it work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validate(idname, spnname){
var getId = document.getElementById(idname).value;
console.log(getId);
if(getId === null || getId === undefined || getId === ""){
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
</script>
</head>
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br/>
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname"/><span id="spnlastname"></span><br/>
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br/>
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br/>
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br/>
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br/>
//is there another way to do this onClick event in javascript that may help
<input id ="btn" type="button" value="Submit"/>
</form>
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
</body
</html>
If you are trying to validate all your elements on submit click.
You can select all using querySelector and and then check each element for its value. If value is "" then change the innerHTML of sibling span element.
var submit = document.querySelector("#btn")
submit.addEventListener("click", function() {
var elements = document.querySelectorAll("input");
for (var i = 0; i < elements.length; i++) {
if (elements[i].value === "") {
elements[i].nextElementSibling.innerHTML = "Required Field";
}
}
});
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname" /><span id="spnfirstname"></span>
<br />
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname" /><span id="spnlastname"></span>
<br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday" />
<span id="spnbirthday"></span>
<br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email" /><span id="spnemail"></span>
<br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep" /><span id="spnhomep"></span>
<br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp" /><span id="spncellp"></span>
<br />
<input id="btn" type="button" value="Submit" />
</form>
</div>
Here I have an form and I validate that form with parsley js:
<form id="form" parsley-validate>
<label for="name">Name</label>
<input type="text" name="name"
parsley-minlength="5"
parsley-required="true"
/>
<label for="lname">Last Name</label>
<input type="text" name="lname"
parsley-minlength="5"
parsley-required="true"
/>
<label for="email">Email</label>
<input type="text" name="email"
parsley-required="true"
parsley-type="email"
/>
<!--
<label for="email">Password</label>
<input type="password" name="pw" id="pw"
parsley-minlength="8"
parsley-required="true"
/>
<input type="password" name="pw-verify"
parsley-equalto="#pw"
parsley-required="true"
/>
-->
<button type="submit">Submit</button>
</form>
<button id="validate" >VALIDATE ONLY NAME and Last Name</button>
but now I need when I click on button id=validate to validate only name and lname fields in form, so I dont want to submit form just want to validate that fileds?
Is that possible?
DEMO: http://jsfiddle.net/RT5aN/405/
You can use validation groups (data-parsley-group). See this SO question.
You can also fire validation whenever you want. It doesn't have to be only at submission. Just wire up a button to a function and call:
$('#myForm').parsley().validate("my-validation-group");
or omit the group name and it'll validate everything.
Can you tell me how can I get all <input> fields with custom "validation" attribute.
<form>
<p><input type="text" id="first_name" name="first_name" validation="isRequired,currectFormat" placeholder="first name" required/></p>
<p><input type="text" id="last_name" name="last_name" validation="isRequired,currectFormat" placeholder="last name"/></p>
<p><input type="text" id="email" name="email" validation="isRequired,currectFormat" placeholder="email"/></p>
<p><input type="text" id="address" name="address" placeholder="address" /></p>
<input type="button" value="OK">
</form>
var inputs = document.querySelectorAll('form input[validation]');
use css attribute selectors in querySelectorAll().
https://jsfiddle.net/hkcmrLer/
Have you tried doing something like this:
document.querySelectorAll('input[validation="isRequired,currentFormat"]');
I have the following input fields:
<form id="validate">
<input name="name" value="" validate-required />
<input name="email" value="" validate-required validate-email/>
<input name="date" value="" validate-date/>
<input name="ip" value="" validate-regexp="^\d+\.\d+\.\d+\.\d+$" />
<input type="submit" value="Send" />
</form>
And I need to add a type value for every field the same, like a name value, but with jQuery.
So far I've tried this :
$(":not(input[type=submit])").prop("type", ????); I don't know what I must write on ???? place.
$(":not(input[type=submit])").prop("type", function (i, p) { return this.name; });
Note that this doesn't check if the type you're setting it with is valid. See this for more details jQuery.prop().
If you want to make every input of the same type such as : text , use the following code.
$(":not(input[type=submit])").prop("type", $(this).val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="validate">
<input name="name" value="" validate-required />
<input name="email" value="" validate-required validate-email/>
<input name="date" value="" validate-date/>
<input name="ip" value="" validate-regexp="^\d+\.\d+\.\d+\.\d+$" />
<input type="submit" value="Send" />
</form>
For other inputs in your code you could also use the following input types that are supported in HTML5 as well :
text,date,datetime,email,url,datetime-local
A list of all possible input type attribute values is given : here.
I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.
Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>
$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});
Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");