How do I get the form submit alert to cancel form action? - forms

I have a javascript function that checks if someone entered their email:
function formValidate(){
form1 = document.forms['_register1'];
if (form1.elements['email'].value == 'Type Your Email Address Here')
{
alert('Please enter your email address.');
form1.elements['email'].focus();
return false;
}
}
Here is the form html:
<form method="post" enctype="multipart/form-data" name="_register1" id="_register" action="signup.php" >
<input type="text" class="field" value="Type Your Email Address Here" name="email" title="Type Your Email Address Here" />
<input type="submit" class="button button-signup" value="SIGN UP!" onclick="formValidate();" />
If the user has not entered an email address, I want the javascript alert to popup and once the user presses ok, I want the page to stay the same. I don't want the action="signup.php" to happen until the email is valid. This seems like it should be simple but I've looked all over the internet and can't find a solution.
Thanks.

http://www.html-form-guide.com/php-form/php-login-form.html
this might be what you're looking for.

I finally figured out the answer. The key is to use the javascript submit() function. Rather than use an input type submit, I use just a regular button. Then, after javascript validates the form and the form has the proper data, I used the submit function. Here is my code below. If anyone is curious, feel free to ask me about it.
function formValidate(){
//define form1 as registration form
form1 = document.forms['_register1'];
var submission = true;
//make sure email address is not blank
if (form1.elements['email'].value == 'Type Your Email Address Here') {
alert('Please enter your email address.');
form1.elements['email'].focus();
var submission = false;
}
//submit form if data is good
if(submission != false){
form1.submit();
}
}
And here is the html:
<input type="text" value="Type Your Email Address Here" name="email" title="Enter email" />
<input type="button" value="SIGN UP!" onclick="formValidation();" />

Related

How to check if input email contains a string based on radio button selection

There is a radio button selection and an email input.
I have to check if the mail contains the selection.
I tried using a function with onkeyup but the function isn't even called.
(Im sorry if I included a lot of unnecessary code)
This is the email input with a span message following, and then the radio button
<!-- Email input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" onkeyup="emailConfirm();"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$"><br>
<!-- Email matches or not message-->
<span id='mailMessage'></span>
<br><br>
<!-- Radio for uni choice -->
<p>University:</p>
<input type="radio" id="UOC" name="uni" value="UOC">
<label for="UOC">UOC</label><br>
<input type="radio" id="HELMEPA" name="uni" value="HELMEPA">
<label for="HELMEPA">HELMEPA</label><br>
<input type="radio" id="TUC" name="uni" value="TUC">
<label for="TUC">TUC</label><br><br>
And here is the function which is called in the email input with onkeyup
var emailConfirm = function(){
//gets the email input from user
var inEmail = document.getElementsById("email").value; // dont know if this is ok
//gets the radio choice
var uniString = $('input[name=uni]:checked').val(); // dont know if this is ok
if(inEmail.includes(uniString)) // I tried using if(true) here and it still doesn't alter message
{
// alter mailMessage
document.getElementById('mailMessage').style.color = 'green';
document.getElementById('mailMessage').innerHTML = 'Good job entering your uni mail';
} else
{
document.getElementById('mailMessage').style.color = 'red';
document.getElementById('mailMessage').innerHTML = 'Please enter your uni mail';
}
}

How to make Confirm Password field in Shopify?

I'm creating a Shopify website, and I'm currently working on the customer registration form. I need to make a Confirm Password field. Does anybody know how to do this in Shopify?
Just Got it working on my register page:
The two password fields:
<div id="create_password_container">
<label for="password">Your Password<em>*</em></label>
<input type="password" value="" name="customer[password]" id="create_password" {% if form.errors contains "password" %} class="error"{% endif %}>
</div>
<div id="password_confirm_container">
<label for="password_confirmation">Password Confirmation</label> <span class="password-match">PASSWORDS DO NOT MATCH</span>
<input type="password" value="" name="customer[password_confirmation]" id="password_confirm" />
</div>
Javascript:
$('form#create_customer').submit(function(e) {
if ( $('#create_password').val() === $('#password_confirm').val()) {
//alert('Password Good!!');
} else {
$('.password-match').fadeIn("slow");
e.preventDefault(); // stops our form from submitting
}
});
The CSS for the password not-matching message:
.password-match {font-size: 12px; color: #f1152f; display:none;}
When customers receive the link to their activation they are prompted for both a password and a password confirmation. Failing that - you can add an extra input (password confirmation) and then do a simple comparison with javascript. Something like:
.... <label for="password" class="login">{{ 'customer.register.password' | t }}</label>
<input type="password" value="" name="customer[password]" id="password" class="large password" size="30" />
<label for="password-confirm" class="login">{{ 'customer.register.password' | t }}</label>
<input type="password" value="" name="customer[password-confirm]" id="password-confirm" class="large password" size="30" /> ....
and then with jquery - something like
$('form').submit(function(e) {
e.preventDefault(); // stops our form from submitting
if ( $('#password').val() === $('#password-confirm').val()) {
$('form').submit();
}
});
That was done off the top of my head - so not tested. It should compare the two password strings - and if they match, allow the form to submit. Of course - you'll probably want to do stuff like show a pop up... alert or message to say your passwords don't match etc. In which case:
$('form').submit(function(e) {
e.preventDefault(); // stops our form from submitting
if ( $('#password').val() === $('#password-confirm').val()) {
$('form').submit();
} else {
// put your validation message in here - this could be showing an element... or showing an alert etc
alert("Your passwords don't match dummy!")
}
});
You could just as easily do
$( ".errorMessage" ).fadeIn( "slow", function() {
// Animation complete
$(this).hide();
});
instead of the alert - but you'd need to make sure you have a div with a class of .errorMessage that contains your error message :)

Validate input field for correct emailid?

I want a help in my Contact form. I want that when a user inputs his email id in input field & if it is wrong i.e without # the input box should shake (which depicts an error) & when user enters correct email Id, it should accept it.
The problem in my current code is, when user enters correct email Id, even then the input field shakes. Need to validate the input field for correct Email.
Any help would be appreciated.
Thanks in advance.
<form id="form_id" method="post" action="<?php $_SERVER['PHP_SELF'] ?>" onsubmit="javascript:return validate('form_id','email');" novalidate>
<input type="text" id="email" name="email" value="<?php if (isset($_POST["email"])) {echo $ema;} ?>" class="error"/>
<br><br>
<button type="submit" name="submit" class="getaccess-btn">Get Access </button>
</form>
The js for the same is:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript">
function validate(form_id,email) {
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = document.forms[form_id].elements[email].value;
if(reg.test(address) == false) {
$(document).ready(function(){
$("button").click(function(){
$("#email").delay(0).animate({"left": "-=30px"}, 80).animate({"left": "+=60px"}, 80).animate({"left": "-=60px"}, 80).animate({"left": "+=60px"}, 80).animate({"left": "-=30px"}, 80);
});
});
return false;
}}
</script>
this php code
<?php
$your_email = "youremailid#gmail.com"; // email address to which the form data will be sent
$subject = "Contact Message"; // subject of the email that is sent
$thanks_page = "thank-you.html"; // path to the thank you page following successful form submission
// Nothing needs to be modified below this line
if (isset($_POST["submit"])) {
$ema = trim($_POST["email"]);
if (get_magic_quotes_gpc()) {
$ema = stripslashes($ema);
}
$error_msg=array();
if (empty($ema) || !filter_var($ema, FILTER_VALIDATE_EMAIL)) {
$error_msg[] = "Your email must have a valid format, such as name#mailhost.com";
}
$email_body =
"Email of sender: $ema\n\n" .
"$com" ;
// Assuming there's no error, send the email and redirect to Thank You page
if (!$error_msg) {
mail ($your_email, $subject, $email_body, "From: $nam <$ema>" . "\r\n" . "Reply-To:");
header ("Location: $thanks_page");
exit();
}
}
?>
The css for the same is:
.error{height:auto;width:100px;position:absolute;}
I can't understand your issue properly, but if you are working with email validation then there is no need of javascript. You can simply use email as input type in HTML5:
for ex, you can write as following:
<form>
<input type="email" name="email" required>
<input type="submit">
</form>
this will automatically validate input field for # and ..
fiddle is here

Adding an extra relative value to an input value field

I'm currently creating a form that is very similar to the following code.
<form name="test" action="/go/test" method="post">
<input type=hidden name="hotspot_url" value="http://www.test.com/">
<input name="cky" value="<%write(cky);%>" type="hidden">
<input name="accept" value="Accept" type="hidden">
<input name="saccept" size="20" value="I Accept" onClick="hotspot.accept.value='Accept'" type="submit">
<input name="sdisconnect" size="20" value="I Decline" onClick="hotspot.accept.value='Decline'" type="submit">
</form>
However, the new form has a text input field. What I want to achieve is that the value entered in that text field is placed, upon send, after the test.com value (location marked with xxx)
<input type=hidden name="hotspot_url" value="http://www.test.com/xxx">
I've looked around - but i can't seem to find a solution.
What would be the best way to get this done?
You can use a buttons onclick event, which is not of type submit. When onclick occurs, you can first change the value of hidden field and then submit the form.
Or if you use JQuery, you can use the following jQuery code to do something before the form is submitted:
$(function() {
$('#form').submit(function() {
// DO STUFF
return true; // return false to cancel form action
});
});
You can give both inputs an id, and do something like this:
give the form an "onsumbit= doThis()"
function doThis(){
var hiddeninput= $('#hiddeninput').val();
var input = $('#input').val();
$('#hiddeninput').val(hiddeninput+input);
return true;
}
this is very simple nothing fancy.

changing the language of error message in required field in html5 contact form

I am trying to change the language of the error message in the html5 form field.
I have this code:
<input type="text" name="company_name" oninvalid="setCustomValidity('Lütfen işaretli yerleri doldurunuz')" required />
but on submit, even the field is not blank, I still get the error message.
I tried with <input type="text" name="company_name" setCustomValidity('Lütfen işaretli yerleri doldurunuz') required />
but then the english message is displayed. Anyone know how can I display the error message on other language?
Regards,Zoran
setCustomValidity's purpose is not just to set the validation message, it itself marks the field as invalid. It allows you to write custom validation checks which aren't natively supported.
You have two possible ways to set a custom message, an easy one that does not involve Javascript and one that does.
The easiest way is to simply use the title attribute on the input element - its content is displayed together with the standard browser message.
<input type="text" required title="Lütfen işaretli yerleri doldurunuz" />
If you want only your custom message to be displayed, a bit of Javascript is required. I have provided both examples for you in this fiddle.
your forget this in oninvalid, change your code with this:
oninvalid="this.setCustomValidity('Lütfen işaretli yerleri doldurunuz')"
<form><input type="text" name="company_name" oninvalid="this.setCustomValidity('Lütfen işaretli yerleri doldurunuz')" required /><input type="submit">
</form>
HTML:
<form id="myform">
<input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" type="email" required="required" />
<input type="submit" />
</form>
JAVASCRIPT :
function InvalidMsg(textbox) {
if (textbox.value == '') {
textbox.setCustomValidity('Lütfen işaretli yerleri doldurunuz');
}
else if (textbox.validity.typeMismatch){
textbox.setCustomValidity('Lütfen işaretli yere geçerli bir email adresi yazınız.');
}
else {
textbox.setCustomValidity('');
}
return true;
}
Demo :
http://jsfiddle.net/patelriki13/Sqq8e/4
This work for me.
<input oninvalid="this.setCustomValidity('custom text on invalid')" onchange="this.setCustomValidity('')" required>
onchange is a must!
I know this is an old post but i want to share my experience.
HTML:
<input type="text" placeholder="Username or E-Mail" required data-required-message="E-Mail or Username is Required!">
Javascript (jQuery):
$('input[required]').on('invalid', function() {
this.setCustomValidity($(this).data("required-message"));
});
This is a very simple sample. I hope this can help to anyone.
TLDR: Usually, you don't need to change the validation message but if you do use this:
<input
oninvalid="this.setCustomValidity('Your custom message / 您的自定义信息')"
oninput="this.setCustomValidity('')"
required="required"
type="text"
name="text"
>
The validation messages are coming from your browser and if your browser is in English the message will be in English, if the browser is in French the message will be in French and so on.
If you an input for which the default validation messages doesn't work for you, the easiest solution is to provide your custom message to setCustomValidity as a parameter.
...
oninvalid="this.setCustomValidity('Your custom message / 您的自定义信息')"
...
This is a native input's method which overwrites the default message. But now we have one problem, once the validation is triggered, the message will keep showing while the user is typing. So to stop the message from showing you can set the validity message to empty string using the oninput attribute.
...
oninput="this.setCustomValidity('')"
...
//Dynamic custome validation on all fields
//add validate-msg attr to all inputs
//add this js code
$("form :input").each(function(){
var input = $(this);
var msg = input.attr('validate-msg');
input.on('change invalid input', function(){
input[0].setCustomValidity('');
if(!(input[0].validity.tooLong || input[0].validity.tooShort)){
if (! input[0].validity.valid) {
input[0].setCustomValidity(msg);
}
}
});
});
<input type="text" id="inputName" placeholder="Enter name" required oninvalid="this.setCustomValidity('Your Message')" oninput="this.setCustomValidity('') />
this can help you even more better, Fast, Convenient & Easiest.
For the lost souls who are seeking a way to fully localize their error messages, see the snippet below. In short, you have to switch over the properties of event.target.validity and override the corresponding error message using event.target.setCustomValidity(message). If you just care about the empty field case as OP, just consider the case of valueMissing.
Note that the handler is passed in the React way, but other answers already covered how to do it in vanilla JS.
For the meaning of each validity state and how to implement customized error messages, see MDN: Validating forms using JavaScript.
const handleInvalidForm = (event) => {
const { patternMismatch,
tooLong,
tooShort,
rangeOverflow,
rangeUnderflow,
typeMismatch,
valid,
valueMissing } = event.target.validity;
if (patternMismatch)
event.target.setCustomValidity('...');
else if (tooLong)
event.target.setCustomValidity('...');
else if (tooShort)
event.target.setCustomValidity('...');
else if (rangeOverflow)
event.target.setCustomValidity('...');
else if (rangeUnderflow)
event.target.setCustomValidity('...');
else if (typeMismatch)
event.target.setCustomValidity('...');
else if (valid)
event.target.setCustomValidity('...');
else if (valueMissing)
event.target.setCustomValidity('...');
}
// ...
<form onSubmit={handleFormSubmit}
onInvalid={handleInvalidForm}
>
{emailTextField}
{passwordTextField}
{signInButton}
</form>
<input type="text" id="inputName" placeholder="Enter name" required oninvalid="this.setCustomValidity('Please Enter your first name')" >
this can help you even more better, Fast, Convenient & Easiest.
Do it using JS. Grab the class of the error message, and change it's content for whereever it appears.
var myClasses = document.getElementsByClassName("wpcf7-not-valid-tip");
for (var i = 0; i < myClasses.length; i++) {
myClasses[i].innerHTML = "Bitte füllen Sie das Pflichtfeld aus.";
}
<form>
<input
type="text"
name="company_name"
oninvalid="this.setCustomValidity('Lütfen işaretli yerleri doldurunuz')"
required
/><input type="submit" />
</form>