This question already has an answer here:
Using jquery.validation equalTo( other ) to ensure "Sunday" is the inputted value
(1 answer)
Closed 8 years ago.
I have the following code
$("#emailForm").validate({
rules: {
"UserPasswordReset.EmailAddress": {
maxlength: 256,
email: true,
},
"UserPasswordReset.ConfirmEmailAddress": {
maxlength: 256,
email: true,
equalTo: "#UserPasswordReset.EmailAddress"
}
}
});
When I fill in the below form and press submit I says on the confirm box please enter the same value so I check, double check and for the love of god I check again, but still I get please enter the same value even though both fields are identical.
<div id="home" class="tab-pane active" role="tabpanel">
<div class="form-group">
<label class="col-sm-1 control-label no-padding-right" for="form-field-1-1"> Email</label>
<div class="col-sm-9">
<input id="emailaddress" class="col-xs-10 col-sm-5" type="text" value="" name="UserPasswordReset.EmailAddress" data-val-required="The EmailAddress field is required." data-val="true" autocomplete="off" placeholder="Please enter your email address">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label no-padding-right" for="form-field-1-1"> Confirm </label>
<div class="col-sm-9">
<input id="confirm_email" class="col-xs-10 col-sm-5" type="text" value="" name="UserPasswordReset.ConfirmEmailAddress" autocomplete="off" placeholder="Please confirm your email address">
</div>
</div>
<button id="btnSaveEmail" class="btn btn-info pull-right" type="Submit" value="true" name="SaveEmailAddress"> Update Email </button>
</div>
What am I doing wrong here?
You ConfirmEmailAddress rule has
equalTo: "#UserPasswordReset.EmailAddress"
You don't have a control with id="UserPasswordReset.EmailAddress" (only one with id="emailaddress"). Change it to
equalTo: "#emailaddress"
Related
I am trying to implement Paystack in Laravel; I'm using their suggested documentation for Laravel. The issue is that the amount and email get passed onto the Paystack database, but the customer's name and phone details aren't. How do I get it to be passed along to Paystack?
I have configured the checkout process as mentioned in the documentation based on https://github.com/unicodeveloper/laravel-paystack. I'm using Windows 10 and running Laravel 5.6 and PHP 7.3.
<form class="needs-validation" action="{{ route('pay') }}" method="POST">
<div class="row">
<div class="col-md-6 mb-3">
<label for="first_name">First name</label>
<input type="text" class="form-control" id="first_name"
placeholder="first name" value="" name="first_name" required="">
</div>
<div class="col-md-6 mb-3">
<label for="last_name">Last name</label>
<input type="text" class="form-control" id="last_name"
placeholder="last Name" name="last_name" value="" required="">
</div>
</div>
<div class="mb-3">
<label for="email">Email <span class=" text-danger"> * </span>
</label>
<input type="email" class="form-control" id="email" name="email"
placeholder="you#example.com" required>
</div>
{{ csrf_field() }}
<hr class="mb-4">
<button class="btn btn-success btn-lg btn-block" type="submit"
value="Pay Now!">
<i class="fa fa-plus-circle fa-lg"></i> Complete Payment!
</button>
</form>
I expected that after the payment is complete, the customer data should contain the customer email, and name. But it returns only the email in the customer array.
you have to implement it yourself, before the pay button try to have a form like this
<form action="/myform" method="post">
<input type="text" name="fullname">
<input type="number" name="phone_number">
<button>submit</button>
</form>
Route::post('/myform','controllerhere#form1')->name('name');
Route::get('/pay','controller#function')->name('pay');
Route::post('/pay','controller#function')->name('pay');
then your controller to look like this
public function form1(Request $request){
$request->validate([....]);
save the form and return redirect to your payment form like this
..
return redirect('/pay');
}
then payments can be made, please the above codes are just samples to help
Alternatively if you check the https://github.com/unicodeveloper/laravel-paystack package, there is a commented section in the paystack.php; this contains a sample of how to add custom_fields to the metadata.
`<input type="hidden" name="metadata" value="{{ json_encode($array) }}" >`
$array = [ 'custom_fields' => [
['display_name' => "Cart Id", "variable_name" => "cart_id", "value" => "2"],
['display_name' => "Sex", "variable_name" => "sex", "value" => "female"],
]
]
Edit this to add name of the customer and amount then if you dd($paymentdatails) you will see the details in metadata.
I am using vee-validate to validate the register form and i have made the code as follows,
<form #submit.prevent="signUp()">
<div class="form-group" :class="{'has-error': errors.has('register.mobile_number') }" >
<input v-model="register.mobile_number" v-validate="register.mobile_number" data-vv-rules="required" required class="form-control" type="number" placeholder="Mobile Number">
</div>
<div class="form-group" :class="{'has-error': errors.has('register.email') }" >
<input v-model="register.email" v-validate="register.email" class="form-control" type="email" data-vv-rules="required|email" placeholder="Email">
</div>
<div class="form-group" :class="{'has-error': errors.has('register.password') }" >
<input v-model="register.password" v-validate="register.password" name="password" data-vv-rules="required" class="form-control" type="password" placeholder="Password">
</div>
<div class="form-group" :class="{'has-error': errors.has('register.confirm_password') }" >
<input v-model="register.confirm_password" v-validate="register.confirm_password" name="confirm_password" data-vv-as="password" data-vv-rules="required|confirmed:password" class="form-control" type="password" placeholder="Confirm Password">
</div>
<div class="modal-footer btn-center">
<button type="submit" class="btn btn-default">Sign Up</button>
</div>
</form>
And the script was:
export default {
data() {
return {
register: {
mobile_number: '',
email: '',
password: '',
confirm_password: '',
},
}
},
methods: {
signUp() {
this.$validator.validateAll().then((result) => {
});
axios.post(config.apiDomain+'/Home',this.register).then(response=>{
});
}
},
}
And also imported vee-validate in main.js as,
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
But if we enter anything inside the input box, it is throwing error as
Uncaught Error: [vee-validate] No such validator '12312321' exists.
Whatever thing i enter inside any of the input box, it is showing the same error. Kindly help me to resolve this issue.
I had a similar error in VeeValidate 3, and the problem is that I forgot to include the rules in the import statement and then extend them like this:
import { required, email, integer, between } from 'vee-validate/dist/rules';
extend('required', required);
extend('email', email);
extend('integer', integer);
extend('between', between);
In case someone else does the same mistake.
The code is incorrectly specifying the validation rules. For example here:
<input v-model="register.mobile_number" v-validate="register.mobile_number" data-vv-rules="required" class="form-control" type="number" placeholder="Mobile Number">
The code is saying that the validation rule should be whatever is in register.mobile_number because of this: v-validate="register.mobile_number".
Instead, you should specify the name(s) of the validation rules to use.
<input v-model="register.mobile_number" v-validate="'required'" class="form-control" type="number" name="Mobile Number" placeholder="Mobile Number">
Note that I added name="Mobile Number" because either name or data-vv-name is required, and I removed data-vv-rules because it is deprecated.
All of this is covered directly in the basic example in the documentation.
I followed same sample with the code and tried to show validation when user removes the text in the input and show display messages.Unfortunately, when I remove the text field it does not show anything. Could you please check the code and tell me why I can not show the validation message ?
Regards
Alper
<label for="name">SA / Rentennummer 005 :</label>
<input type="text" class="form-control" id="name" required
[(ngModel)]="Input.name" name="name" #name="ngModel">
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
name is required
</div>
In The typescript :
Input= { name:'Alper'};
form : FormGroup;
this.form = fb.group({
name : new FormControl({value: null}, Validators.compose([Validators.required, Validators.maxLength(100)]))
});
<form class="form-details" role="form" name="registrationForm" [formGroup]="userForm">
<div>
<div class="row input-label">
<label class="form-label" for="name">First name</label>
<input
[formControl]="form.controls['name']"
type="text"
class="form-control"
id="form"
name="form">
</div>
<div *ngIf="!form.controls['name'].valid">field is required</div>
</div>
</form>
I have 2 fields that get validated.
The issue is these fields are getting set with values by Chrome, such as the saved password and email.
So when the page loads the 2 fields (email + password) which have the right values as set via Chrome but the 2nd field is shown as invalid.
I am trying to detect changes after the page has loaded.
I have tried calling the changeDetectorRef from ngInit but it did not work.
When I click on the page the field then shows that it is valid.
Within the constructor:
this.form = fb.group({
'email': ['', Validators.compose([
Validators.required,
Validators.minLength(4),
EmailValidator.validate])],
'password': ['', Validators.compose([
Validators.required,
Validators.minLength(6)])]
});
this.email = this.form.controls['email'];
this.password = this.form.controls['password'];
I have tried:
ngOnInit() {
this.zone.run(() => {
this.email.updateValueAndValidity();
this.password.updateValueAndValidity();
});
}
But still no good.
I find it odd that the first field is shown as valid but the 2nd one is not.
It is a password field so that might have something to do with it?
Both fields are of type AbstractControl.
Here is the html:
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
<div class="form-group row" [ngClass]="{'has-error': (!email.valid), 'has-success': (email.valid)}">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input [formControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row" [ngClass]="{'has-error': (!password.valid), 'has-success': (password.valid)}">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input [formControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button [disabled]="!form.valid" type="submit" class="btn btn-default btn-auth">Sign in</button>
</div>
</div>
</form>
I am using jQuery and form validator plugin and it works fine except one page shown below.
HTML:
<form method="POST" enctype="multipart/form-data" id="frmReg" class="form-horizontal" novalidate="novalidate">
<input type="hidden" name="mode" id="mode" value="insert">
<input type="hidden" name="fileName" id="fileName">
<div class="control-group">
<label id="fileLabel" class="control-label">*File Name</label>
<div class="controls">
<input type="file" name="file" id="file" placeholder="Select file" required="required" class="valid">
</div>
</div>
<div class="control-group">
<label class="control-label">*Package Name</label>
<div class="controls">
<input type="text" name="id.appId" id="appId" placeholder="Type group ID" tabindex="0" class="valid">
</div>
</div>
<div class="control-group">
<label class="control-label">*Application Title</label>
<div class="controls">
<input type="text" name="appName" id="appName" placeholder="Type application name" class="valid">
</div>
</div>
<div class="control-group">
<label class="control-label">*Version</label>
<div class="controls">
**<input type="text" name="id.version" id="version" placeholder="Type version" tabindex="0" class="valid">**
</div>
</div>
<div class="control-group">
<label class="control-label">Description</label>
<div class="controls">
<textarea name="description" id="description" placeholder="Type description" class="valid"></textarea>
</div>
</div>
<div class="modal-footer">
<button aria-hidden="true" data-dismiss="modal" class="btn">Close</button>
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
JS:
$("#frmReg").validate({
ignore: "", //for hidden field
rules: {
version: {
required: true,
number: true
}
},
messages: {
version: {
required: "Enter version number",
number: "Decimal numbers only allowed."
}
}
});
**$("#frmReg").validate().element("#version");**
It works when I use 'version' as the input name but I have to use 'id.version' as input name rather than 'version' because of server-side framework. But when I use the name, the validation code always returns true, even when I type any special characters and alphabets.
How can I still use id.version for the element?
Your answer would be appreciated.
As per the documentation...
Fields with complex names (brackets, dots)
If your form consists of fields using names that aren't legal JavaScript identifiers, you have to quote those names when using the rules option
Simply put quotes around the name containing dots...
$("#frmReg").validate({
ignore: "", //for hidden field
rules: {
'id.version': {
required: true,
number: true
}
},
messages: {
'id.version': {
required: "Enter version number",
number: "Decimal numbers only allowed."
}
}
});
Working DEMO: http://jsfiddle.net/A2ZdL/