Validate form on submit only using parsley.js - javascript

I have a simple form
<form action="#" method="GET" class="parsleyVal">
<div class="input-group input-group-lg">
<input type="email" name="email" class="form-control input-email"
placeholder="Enter your email"
data-parsley-required-message="Please enter your email address"
data-parsley-required title="Please enter your email address"
auto-complete="off" data-parsley-trigger="submit" />
<span class="input-group-btn">
<button class="btn btn-orange" type="submit" data-parsley-trigger="click touch">
Sign up
</button>
</span>
</div>
</form>
Validation starts when the sign-up button is clicked.
However, if there is no email specified, an error is shown:
enter your email.
When users start typing their email address, parsley.js does the automatic validation and shows that email must be valid.
I'd like parsley.js to re-validate the email field when submit button is clicked again but not on the fly.
I have tried xCodexInlinexPlacexHolderx on the input field - does not help.

Looks like I finally figured out what I wanted.
Might be not ideal way to do it, if anyone could recommend something else.
$('.parsleyVal input[type=email]').on('keyup keydown', function () {
$('.filled').removeClass('filled');
$('.parsleyVal').parsley().destroy();
})
Script removes class to hide error message and destroy parsley validation, which will be triggered again on sign-up button click.

You can control what triggers the validation with two different settings:
data-parsley-trigger
Setting for what triggers the validation the first time. The default is null which basly means on submit
data-parsley-trigger-after-failure
Setting for what triggers a revalidation after the first failure. The default is input which means that the field will be revalidated after each change on the field.
The setting you need is: data-parsley-trigger-after-failure
Example:
<input type="email" id="profile-email"
data-parsley-required="true"
data-parsley-trigger-after-failure="submit"/>

Related

Form won't submit with custom validation error message

I wanted to create a custom validation error message. When I try to submit my form , without filling the input box I get the custom error message. However, even when I fill up the input box the form does not submit I get my custom validtion error message.
<input name="trailerNumber" class="form-control" type="text" aria-describedby="enter Part Number" placeholder="Trailer Number" oninvalid="this.setCustomValidity('Trailer Number must be filled to initiate order')"
onvalid="this.setCustomValidity('')">
Is there a way to set custom validatoin on required field?
Instead of using the onvalid event listener, try the oninput or onchange events to reset the custom validity.
According to MDN, there is no onvalid event handler.
<form action="" onsubmit="event.preventDefault(); alert('Submitted')" method="GET">
<input
name="trailerNumber"
required="required"
minlength="5"
placeholder="Trailer Number"
oninvalid="this.setCustomValidity('Trailer Number must be filled to initiate order')"
oninput="this.setCustomValidity('')"
>
<input type="submit" value="Submit">
</form>

Retrieving the value of button while submitting form with javascript

I have a file index.php with a log in form comprising a field for the email address, a field for the password, a box to check, and two submit buttons:
the first button ("log_in") is for trying to log in with the current combination email/password. This button triggers a script ("check_box()") which verifies that the box has been checked.
the second button is for generating a new password for the current email address. It also triggers a script ("confirmation()") which asks the user to confirm before executing the action.
I am trying to submit the form with javascript, and to keep track of which button has been submitted in order to execute the correct action. Please see the code below.
<form id="form" name="form" method="post" action="index.php">
<input type="text" name="email" id="email" placeholder="Email address" />
<input type="password" name="password" id="password" placeholder="Password" />
<input type="radio" id="box" name="box"><label for="box">Please check this box if you want to log in.</label>
<input type="button" id="log_in" name="log_in" value="Log in" onclick="return check_box();"/>
<input type="button" id="change_password" name="change_password" value="Password forgotten?" onclick="return confirmation();"/>
</form>
function confirmation(){
if (!confirm("A new password will be generated and sent to your email address. Please make sure that your email address is written correctly, and click on Confirm to proceed.")) {
return FALSE;
}
else{
var form = document.getElementById('form');
form.submit();
}
}
function check_box(){
var success = document.querySelector("input[name=box]:checked");
if(!success){
alert("Please check the box.");
}
else{
var form = document.getElementById('form');
form.submit();
}
}
My problem is to retrieve the values of the buttons when the form is submitted. I tried
if(isset($_POST['log_in']))
to detect whether the user has been trying to log in, and
if(isset($_POST['change_password']))
to detect whether the user wants to change password. But these tests always return FALSE. Where is the mistake?
Thank you in advance.

Abide disable button and enable on validation in Zurb Foundation

I'm familiar with foundation abide a little, I was wondering how can I make the button disable and as the user type it gets validated and change the button to enable for submit.
Form Example:
<form data-abide>
<div class="name-field">
<label>Your name <small>required</small>
<input type="text" required pattern="[a-zA-Z]+">
</label>
<small class="error">Name is required and must be a string.</small>
</div>
<div class="email-field">
<label>Email <small>required</small>
<input type="email" required>
</label>
<small class="error">An email address is required.</small>
</div>
<input id="contactsubmit" class="button" type="submit" value="SEND" disabled>
</form>
Disable:
<input id="contactsubmit" class="button" type="submit" value="SEND" disabled>
Now, as a user keep typing I would like it to be validated and if everything is correct enable the button, I know I can do this with jQuery .change(), But is there any standard way for abide?
I have done a lot of research, but I don't see what I'm trying to achieve, I can do it with bootstrap validation but not foundation.
UPDATE
Here is the plugin I use with bootstrap to achieve what I want, Validator.js.
Not quite what you are looking for because most forms can not be submitted unless your form is validated. Listening to see if the form validates and then enabling a submit button seems like its overkill.
Thus data-abide has this in mind when they created
If a submit event is fired, a valid.fndtn.abide event is triggered
when the form is valid and an invalid.fndtn.abide event is triggered
when the form is invalid.
with that in mind i would enable the button and then
$(form)
.on('invalid.fndtn.abide', function () {
var invalid_fields = $(this).find('[data-invalid]');
// tell the user that invalid fields must be fixed before submit
})
.on('valid.fndtn.abide', function () {
// your submit action here.
});
There is an option in the /foundation.abide.js if you want to change out the validation works
Abide.defaults = {
validateOn: 'fieldChange', // options: fieldChange, manual, submit
try changing it to manual and see if it works like 'abide : {live_validate : true, // validate the form as you go that was in older versions
Disabled Button

Prevent angular validation from occurring while entering data

I have a form with an email field. I would like to prevent the user from submitting unless the email address exists and is valid. However, I only want these errors to appear when toggling out of the email field or clicking sumbit. My "invalid email" message is appearing WHILE the user is typing the email and remains visible until they've finished entering a valid email. How can I prevent this behavior?
<div ng-show="emailMeForm.Email.$error.required" class="errorMessage">
You must enter an email
</div>
<div ng-show="emailMeForm.Email.$error.email" class="errorMessage">
Email address invalid
</div>
<form name="emailMeForm" novalidate="">
Email Address
<input ng-model="vm.emailAddress" type="email" name="Email" />
<button ng-click="emailMeForm.$valid">Continue</button>
</form>
Must be sufficient:
ng-show="emailMeForm.Email.$touched && emailMeForm.Email.$error.required"

The original state of using Angular.js to validate form input

the code below is part of signin.html. when i visit that page, nick and password is surely empty, so the myForm.nick.$error.required is true. the error message is displayed. What i want is, when i visited the page, there's no error message on the page. What should i do? Thanks
<form ng-submit="signin()" name="myForm">
<input type="text" name="nick" ng-model="data.nick" required>
<span class="error" ng-show="myForm.nick.$error.required">Required</span><br>
<input type="password" name="password" ng-model="data.password" required>
<span class="error" ng-show="myForm.password.$error.required">Required</span><br>
</form>
You should add a $dirty condition to prevent the required field message being displayed at the beginning of page.
myForm.nick.$error.required && myForm.nick.$dirty
myForm.password.$error.required && myForm.password.$dirty
$dirty===true means that user has already interacted with the form.
Here is a jsfiddle demo
Hope this helpful.

Categories

Resources