So, I have this code
<script>
function validate(f) {
var ok = true;
if (f.id.value === '' || f.id.value === null) {
ok = false;
}
return ok;
}
function validate2(f) {
var ok = true;
if (f.name.value === '' || f.name.value === null) {
ok = false;
}
return ok;
}
</script>
<form action="#" method="post">
<input type="text" name="id"/>
<input type="text" name="name"/>
<input type="submit" name="send_id" value="Send ID"/>
<input type="submit" name="send_name" value="Send Name"/>
</form>
How can I do it to validate the form depending on which submit is used?
I want to execute validate(); if the Send Id button is clicked and validate2() if we use the other one.
You can do this:
<form id="myForm" action="#" method="post">
<input type="text" name="id"/>
<input type="text" name="name"/>
<input type="submit" name="send_id" value="Send ID" onclick="return validate();" />
<input type="submit" name="send_name" value="Send Name" onclick="return validate2();" />
</form>
This way when your functions return false (meaning the form is not valid) the submit is interrupted.
And get your f parameter manually.
function getForm() {
return document.getElementById("myForm");
}
function validate() {
var f = getForm();
var ok = true;
if (f.id.value === '' || f.id.value === null) {
ok = false;
}
return ok;
}
function validate2() {
var f = getForm();
var ok = true;
if (f.name.value === '' || f.name.value === null) {
ok = false;
}
return ok;
}
You have to give an id to your form as show above.
Have another function as checkValidate() or something as you like and check it on click of both the buttons
<script>
function checkValidate(buttonName) {
if(buttonName == 'send_id'){
return validate();
}else{
return validate2();
}
}
function validate() {
var ok = true;
if (f.id.value === '' || f.id.value === null) {
ok = false;
}
return ok;
}
function validate2() {
var ok = true;
if (f.name.value === '' || f.name.value === null) {
ok = false;
}
return ok;
}
</script>
<form action="#" method="post">
<input type="text" name="id"/>
<input type="text" name="name"/>
<input type="submit" name="send_id" value="Send ID" onclick="return checkValidate(this.name)"/>
<input type="submit" name="send_name" value="Send Name" onclick="return checkValidate(this.name)"/>
</form>
I hope it helps...
Not tested.. but something like that...
$( "input[name='send_id']" ).click(function(event) {
event.preventDefault()
validate();
$("form").submit();
});
$( "input[name='send_name']" ).click(function(event) {
event.preventDefault()
validate2();
$("form").submit();
});
Related
I'm added text type and button enable disable function , but when I right click and copy paste button not enable , any solution for this?
Thanks
function manage(txt) {
var bt = document.getElementById('btSubmit');
if (txt.value != '') {
bt.disabled = false;
} else {
bt.disabled = true;
}
}
<input type="text" id="txt" onkeyup="manage(this)" />
<input type="submit" id="btSubmit" disabled />
You could do with oninput event.
function manage(txt) {
var bt = document.getElementById('btSubmit');
if (txt.value != '') {
bt.disabled = false;
} else {
bt.disabled = true;
}
}
<input type="text" id="txt" oninput="manage(this)" />
<input type="submit" id="btSubmit" disabled />
In that case you need to use onpaste event.
document.getElementById("txt").onpaste = manage;
function manage(txt) {
var bt = document.getElementById('btSubmit');
if (txt.value != '') {
bt.disabled = false;
}
else {
bt.disabled = true;
}
}
<input type="text" id="txt" onkeyup="manage(this)" />
<input type="submit" id="btSubmit" disabled />
More info about that event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste
When I invoke the function it is getting invoked but it flashes the result. Could please tell me what is the mistake I did?
Below is the HTML Code I used:
I have replaced the input type as a button but still, error not fixed.
function reg() {
//Name Field
var f = document.forms["registration"]["fullname"].value;
if (f == "") {
alert("Enter the name");
return false;
} else if (!f.match(/^.[a-zA-Z]+$/))
{
alert("Enter only alphabets");
return false;
}
document.getElementById('details').innerHTML = "Hi" + registration.fullname.value;
}
<form name="registration" onsubmit="return reg()">
<input type="text" name="fullname" placeholder="Enter Your Full Name"><br><br>
<input type="submit" value="submit">
</form>
Here is what I believe you want to do.
Note it is better to add an event handler in the script rather than having an inline handler, but for now I pass the form itself in the function
function reg(form) {
//Name Field
var f = form.fullname.value;
if (f == "") {
alert("Enter the name");
return false;
}
// no need for else when you return
if (!f.match(/^[\. a-zA-Z]+$/)) { // I personally have a space in my full name
alert("Enter only alphabets and space");
return false;
}
document.getElementById('details').innerHTML = "Hi " + f;
// change to true if you want to submit the form but you will then not be able to see the HI
return false;
}
<form name="registration" onsubmit="return reg(this)">
<input type="text" name="fullname" placeholder="Enter Your Full Name"><br><br>
<input type="submit" value="submit">
</form>
<span id="details"></span>
should i put "submit" instead "form_name" in the last block of code? what is the correct way?
thanks!
function check() {
var title = document.getElementById("title");
var content = document.getElementById("content");
if (title == "") {
alert("title is required");
return false;
}
if (content == "") {
alert("content is required");
return false;
}
var submit = document.getElementById("form_name");
submit.submit();
}
this is my form
<form action="#" method="post" id="form_name" name="form_name">
<input type="text" name="title" id="title" />
<textarea name="content" id="content" cols="30" rows="10"></textarea>
<input type="submit" value="Submit" id="submit" name="submit" onclick="return check();"/>
</form>
First you are selecting an element and acting like it is the value
var title = document.getElementById("title"); <-- DOM element
if (title == "") { <-- checking the DOM against a string.
You should be using .value to get what was entered.
Next you are submitting the form.... but you clicked on a submit button inside of the form so that will submit the form. So that is not needed.
function check() {
var title = document.getElementById("title").value;
var content = document.getElementById("content").value;
if (!title.trim().length) {
alert("title is required");
return false;
else if (!content.trim().length) {
alert("content is required");
return false;
}
return true
}
And never name anything submit, it just leads to problems.
In most recent browsers you have more power to use
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}else{
document.getElementById("demo").innerHTML = "";
}
}
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
Reference:
https://www.w3schools.com/js/js_validation_api.asp
I have several validation functions that work fine and I want to write an additional validation in simple javascript (no jQuery, etc) for the entire form that disables/enables the Submit button depending on whether the other validation functions return true or false. How do I go about that?
For example, for my main HTML I have:
<form id="form" method="POST">
<label class="form">Field 1</label><input type="text" name="input1" onkeyup="validateInput1(); return false">
<label class="form">Field 2</label><input type="text" name="input2" onkeyup="validateInput2(); return false">
...
<button id="submit" type="submit" value="submit">Submit</button>
</form>
For my script I have:
function validateInput1(){
...
}
function validateInput2(){
...
}
Now I want to write a function with something like:
function validateForm(){
var submitButton = document.getElementById('submit');
submitButton.disabled = true;
/*If all other validation functions like validateInput1() returns true then submitButton.disabled = false*/
}
How do I do this?
Start the button off as disabled. Hook to the onchange event for each of the form inputs, and then have it check the validateForm() function to see if all the forms are valid. After that, if they're all valid, set the submit button to enabled, otherwise set it to disabled.
var inputs = document.querySelectorAll('#form input');
var validateInput1 = function()
{
return document.getElementById('input1').value != '';
}
var validateInput2 = function()
{
return document.getElementById('input2').value != '';
}
var validateForm = function() {
if ( !validateInput1() ) {
return false;
}
if ( !validateInput2() ) {
return false;
}
return true;
}
for ( var i = 0, len = inputs.length; i < len; i++ )
{
var checkValid = function() {
document.getElementById('submit').disabled = !validateForm();
//Is the same as:
/*if ( !validateForm() )
{
document.getElementById('submitButton').disabled = true;
}
else
{
document.getElementById('submitButton').disabled = false;
}*/
}
inputs[i].addEventListener('change', checkValid);
inputs[i].addEventListener('keyup', checkValid);
}
<form id="form" method="POST" onsubmit="alert('Submitted!'); return false">
<label class="form">Field 1</label><input type="text" name="input1" id="input1">
<label class="form">Field 2</label><input type="text" name="input2" id="input2">
<button id="submit" type="submit" value="submit" disabled="disabled">Submit</button>
</form>
I've tried a lot of things but I can't seem to make it work
Problem is whatever I type is considered false, even when I try valid email adress (such as ok#gmail.com)
Here's my code
function validateEmail(email) {
var re = /[^\s#]+#[^\s#]+\.[^\s#]+/;
return re.test(email);
}
var email = $('input[name = pEmail]').val();
$('#nPopupSubmit').click(function () {
if (!validateEmail(email)) {
$('label[id = pEmailError]').show();
$('input[name = pEmail]').focus();
return false;
} else {
whatever
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form id="popup1" method="post">
<fieldset>
<input id="pEmail" type="text" placeholder="E-mail" value="E-mail" onclick="this.value=''" class="popup_input" name="pEmail" type="text" />
<label id="pEmailError" style="color:#FF0000; display:none;">Error</label>
<button type="submit" id="nPopupSubmit" name="nPopupSubmit">Go !</button>
</fieldset>
</form>
Do any of you have a clue on what's going on ?
Thank you !
Your function doesn't contain error, perhaps your jQuery? Your email variable should be defined after the click, otherwise, email's value would always = "Email" (the default value)
$('#nPopupSubmit').click(function () {
var email = $('#pEmail').val(); //<-- This is where you should put this
if (!validateEmail(email)) {
$('#pEmailError').show();
$('#pEmail').focus();
return false;
} else {
//whatever
}
});
Also, you can simplify your code by using the ids you have already given your elements :)
function validateEmail(email) {
var re = /[^\s#]+#[^\s#]+\.[^\s#]+/;
return re.test(email);
}
$('#nPopupSubmit').click(function () {
var email = $('#pEmail').val();
if (validateEmail(email) !== true) {
$('#pEmailError').show();
$('#pEmail').focus();
return false;
} else {
//whatever
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="popup1" method="post">
<fieldset>
<input id="pEmail" type="text" placeholder="E-mail" value="E-mail" onclick="this.value=''" class="popup_input" name="pEmail" type="text" />
<label id="pEmailError" style="color:#FF0000; display:none;">Error</label>
<button type="submit" id="nPopupSubmit" name="nPopupSubmit">Go !</button>
</fieldset>
</form>
Your current regex won't validate how you want.
You can try this:
function validateEmail(email) {
var re = new RegExp("^[^\\s#]+#[^\\s#]+?\\.[^\\s#]+$", "m");
console.log(email.match(re));
if(email.match(re))
{
return true;
}
else
{
return false;
}
}
window.alert(validateEmail("a#b.c"));
window.alert(validateEmail("a #b.c"));
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script>
function validateEmail(email) {
var re = new RegExp("^[^\\s#]+#[^\\s#]+?\\.[^\\s#]+$", "m");
console.log(email.match(re));
if(email.match(re))
{
return true;
}
else
{
return false;
}
}
console.log(validateEmail("a#b.c"));
</script>
</body>
</html>
Hope that helps. If you have any questions on specifics just let me know...