Signature Pad Validation - validation

I have a multipage form using jqm. The last two pages uses Thomas j bradleys signature pad. I use jquery validate plugin to validate each page before it moves on.
I can not get jquery validate plugin to verify if the is a signature.
This is the code I use for the validation. All this works fine just need to add the signature validation in.
$("#breakinform").validate({
rules: {
sitename: {
required: true,
},
Address: {
required: true,
},
BreakInDate: {
required: true,
},
recafcheckbox: {
required: true,
},
sigPad: {
required: true,
},
},
messages: {
sitename: {
required: "Please Enter Site Name",
},
Address: {
required: "Please Enter Address",
},
BreakInDate: {
required: "Please Enter Date",
},
recafcheckbox: {
required: "Please Confirm",
},
sigPad: {
required: "Please Sign In The Box",
},
}
});
//break
$("a.check").click(function(){
if($("#breakinform").valid()){
} else {
navigator.notification.alert(
"Please Fill In The Required Fields!",
callBackFunctionB, // Specify a function to be called
'Missing Data',
"OK"
);
function callBackFunctionB(){
console.log('ok');
}
return false;
}
});

A workaround that I used by adding the following to my "submitHandler":
var result = true;
if ($('.sigPad input.output').length)
{
$('.sigPad input.output').each(function(){
if ($(this).val().length == 0) result = false; });
}
if (!result ) return false;
and keeping signaturePad's "validateFields" option to true.

#Hunty3000, I don't think you'll be able to use the jQuery validate plugin to validate your canvas so why not use Signature Pad's built in validation?
Here's how:
http://thomasjbradley.ca/lab/signature-pad/#accept-form
If you need more assistance, don't hesitate to ask.

Related

Change RegEx Validation on textbox based on dropdown selection

I have a working example of replacing Validation methods based on a dropdown's selection.
The issue I'm having is using a regex with the JQueryValidation, entering a valid Twitter address always returns the Invalid Address error.
The below function runs when the Page loads, I set the Default Validation, then I add new validation when the dropdown is changed.
jsFiddle - here
ValidationDefaults();
//Setup all .Select2
$(".select2").select2({
theme: 'bootstrap4',
placeholder: '- Search -',
});
$('#SocialMediaNetworkId').on('select2:select', function(e) {
var data = e.params.data;
AccountNameLabel(data.id);
});
$('#btnSubmit').on('click', function(e) {
if ($("form").valid()) {
/* $('#Edit').submit();*/
}
});
function AccountNameLabel(SocialMediaNetworkId) {
$("#Edit").data('validator').resetForm();
switch (parseInt(SocialMediaNetworkId)) {
case 1:
$("label[for='SocialMediaAccountName']").text("FaceBook Url");
$("#SocialMediaAccountName").attr("placeholder", "FaceBook Url - Ex. https://www.FaceBook.com/joeblow");
FaceBookValidation();
break;
case 2:
$("label[for='SocialMediaAccountName']").text("YouTube Url");
$("#SocialMediaAccountName").attr("placeholder", "YouTube Url - Ex. https://www.YouTube.com/joeblow");
YouTubeValidation();
break;
case 3:
$("label[for='SocialMediaAccountName']").html("Twitter Url");
$("#SocialMediaAccountName").attr("placeholder", "Twitter Url - Ex. https://www.twitter.com/joeblow");
TwitterValidation();
break;
case 4:
$("label[for='SocialMediaAccountName']").text("Instagram Url");
$("#SocialMediaAccountName").attr("placeholder", "Instagram Url - Ex. https://www.Instagram.com/joeblow");
InstagramValidation();
break;
}
}
function ValidationDefaults() {
$('#Edit').validate({
rules: {
SocialMediaNetworkId: {
required: true
}
},
messages: {
SocialMediaNetworkId: "* Required Field"
},
errorElement: 'span',
errorPlacement: function(error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function(element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
}
function TwitterValidation() {
var settings = $('#Edit').validate().settings;
$("#SocialMediaAccountName").rules("remove");
$("#SocialMediaAccountName").rules("add",
{
required: true,
pattern: "/http(?:s)?:\/\/(?:www\.)?twitter\.com\/([a-zA-Z0-9_]+)/",
messages: {
required: "Required input",
pattern: "* Must be a valid Twitter URL - Ex. https://www.twitter.com/joeblow"
}
}
);
//$("#SocialMediaAccountName").rules("add", {
// required: true,
// pattern: {
// required: "/http(?:s)?:\/\/(?:www\.)?twitter\.com\/([a-zA-Z0-9_]+)/"
// },
// messages: {
// required: "Required input",
// pattern: "* Must be a valid Twitter URL - Ex. https://www.twitter.com/joeblow"
// }
//});
//// Modify validation settings
//$.extend(true, settings, {
// rules: {
// // Add validation
// "SocialMediaAccountName": {
// required: true,
// pattern: "/http(?:s)?:\/\/(?:www\.)?twitter\.com\/([a-zA-Z0-9_]+)/"
// }
// }
//});
//$.extend(jQuery.validator.messages, {
// required: "* Required Field.",
// pattern: "* Must be a valid Twitter URL - Ex. https://www.twitter.com/joeblow"
//});
}

Multiple SqPaymentForms in one webpage

I am using Square credit card processing, I have to use two payment forms in same webpage one is for pickup payment and other for delivery payment.
I tried to integrate SqPaymentForm in my webpage i was successful for pickup payment. when it comes to delivery may be formwas loading twice and I have to enter all my card details twice in the form. How can i over come this problem?
var paymentFormUserPickUp = new SqPaymentForm({
applicationId: ApplicationId,
inputClass: 'sq-input',
cardNumber: {
elementId: 'sq-card-numberup',
placeholder: 'Card Number'
},
cvv: {
elementId: 'sq-cvvup',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-dateup',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-codeup',
placeholder: 'Zip Code'
},
callbacks: {
cardNonceResponseReceived: function (errors, nonce, cardData) {
if (errors) {
// handle errors
var Errors;
errors.forEach(function (error) {
Errors += error.message + ",";
});
Errors.trimEnd(',');
alert(Errors);
} else {
alert(nonce);
localStorage.setItem("Nonce", nonce);
}
},
unsupportedBrowserDetected: function () {
// Alert the buyer that their browser is not supported
}
}
});
var paymentFormUserDelivery = new SqPaymentForm({
applicationId: ApplicationId,
inputClass: 'sq-input',
cardNumber: {
elementId: 'sq-card-numberud',
placeholder: 'Card Number'
},
cvv: {
elementId: 'sq-cvvud',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-dateud',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-codeud',
placeholder: 'Zip Code'
},
callbacks: {
cardNonceResponseReceived: function (errors, nonce, cardData) {
if (errors) {
// handle errors
var Errors;
errors.forEach(function (error) {
Errors += error.message + ",";
});
Errors.trimEnd(',');
alert(Errors);
} else {
alert(nonce);
localStorage.setItem("Nonce", nonce);
}
},
unsupportedBrowserDetected: function () {
// Alert the buyer that their browser is not supported
}
}
});
Thanks!!!
There is no support for multiple forms for a single card input. Why does an order take both pickup and delivery payments? Do you have a sample page?

createuser validation error on method with aldeed collection2

Folks,
I need help. I've been at this for sometime now and cant seem to figure it out. It should be simple. I'm using the aldeed collection2 and I cant seem to get past validation error being thrown by the create user account method. My schema is pretty standard, attached to meteor.users collection:
Schema={}
//SimpleSchema.debug = true;
Schema.UserProfile = new SimpleSchema({
picture: {
type: String,
optional: true
},
updatedAt: {
type: Date,
autoValue: function() {
if (this.isUpdate) {
return new Date();
}
},
denyInsert: true,
optional: true
},
roles: {
type: String,
optional: true
}
});
Schema.User = new SimpleSchema({
_id: {
type: String,
regEx: SimpleSchema.RegEx.Id,
optional: true,
denyUpdate: true
},
emails: {
type: [Object],
optional: true
},
"emails.$.address": {
type: String,
regEx: SimpleSchema.RegEx.Email,
label: ""
},
"emails.$.verified": {
type: Boolean,
optional: true
},
createdAt: {
optional: true,
type: Date,
autoValue: function() {
if (this.isInsert) {
return new Date;
} else if (this.isUpsert) {
return {$setOnInsert: new Date};
} else {
this.unset();
}
}
},
profile: {
type: Schema.UserProfile,
optional: true
},
services: {
type: Object,
optional: true,
blackbox: true
},
// Option 2: [String] type
// If you are sure you will never need to use role groups, then
// you can specify [String] as the type
roles: {
type: [String],
optional: true,
autoValue: function() {
if (this.isInsert) {
return ['user'];
} else if (this.isUpsert) {
return {$setOnInsert: ['user']};
} else {
this.unset();
}
}
},
password: {
type: String,
label: "Password",
min: 6
}
});
/* Attach schema to Meteor.users collection */
Meteor.users.attachSchema(Schema.User);
The method on my server for creating the user is like below:
Accounts.config({
forbidClientAccountCreation : true
});
//creates user on server
Meteor.methods({
createNewUserAccount: function(userdata) {
var userId;
check(userdata, Schema.User);
//console.log(userdata);
userId = Accounts.createUser({
email: userdata.emails[0].address,
password: userdata.password,
profile: userdata.profile
});
//console.log(userId);
return userId;
}
});
Accounts.onCreateUser(function(options, userdata) {
//user.profile = {};
// we wait for Meteor to create the user before sending an email
//need to address the exception when existing email is tried for signing up
Meteor.setTimeout(function () {
Accounts.sendVerificationEmail(userdata._id);
}, 2 * 1000);
return userdata;
});
for my client, I have the following signup.js
Template.signup.events({
'submit form': function(e){
// Prevent form from submitting.
e.preventDefault();
//console.log(doc);
user = {
'email.$.address': $('[name="emails.0.address"]').val(),
password: $('[name="password"]').val()
};
Meteor.call('createNewUserAccount', user, function(error) {
if (error) {
return alert(error.reason);
} else {
Router.go('/');
}
});
}
Does anyone know what I'm doing wrong? The schema does not validate the email address.I get the error:
email.0.address is not allowed by the schema
You're creating an object:
user = {
'email.$.address': $('[name="emails.0.address"]').val(),
password: $('[name="password"]').val()
};
The key is the literal string 'email.$.address'
So when you do:
userId = Accounts.createUser({
email: userdata.emails[0].address,
password: userdata.password,
profile: userdata.profile
});
The email key can't find userdata.emails[0] because there is no emails key. Instead, the key is 'email.$.address'. Also, the schema does not have a key called email.$.address. It has one called emails.$.address
Try:
Template.signup.events({
'submit form': function(e){
// Prevent form from submitting.
e.preventDefault();
//console.log(doc);
user = {
'emails.$.address': $('[name="emails.0.address"]').val(),
password: $('[name="password"]').val()
};
Meteor.call('createNewUserAccount', user, function(error) {
if (error) {
return alert(error.reason);
} else {
Router.go('/');
}
});
}
Then
//creates user on server
Meteor.methods({
createNewUserAccount: function(userdata) {
var userId;
check(userdata, Schema.User);
//console.log(userdata);
userId = Accounts.createUser({
email: userdata['emails.$.address'],
password: userdata.password,
profile: userdata.profile
});
//console.log(userId);
return userId;
}
});

jquery form validate not catching blank sumbission

I can submit my form whether it is blank or partially filled in, this shouldn't happen since I'm using the jquery validator plug in. I have the plug in script in the right place and the validate method is properly attached to the right form selector. What else could be the problem?
$("form").submit(function(){
(".selector").validate({
rules: {
performance : {
required: true,
customvalidation: true
},
location : {
required: true,
customvalidation: true
},
date : {
required: true,
customvalidation: false
},
time : {
required: true,
customvalidation: true
},
guests : {
required: true,
customvalidation: true
},
price : {
required: true,
customvalidation: true
}
},
messages: {
performance : {
required: "enter a show name"
},
location : {
required: "enter a location"
},
date : {
required: "pick a date"
},
time : {
required: "give a time"
},
guests : {
required: "how many people do you need?"
},
price : {
required: "what is the cover price?"
}
},
submitHandler: function(form) {
console.log("now validated");
}
}); //closes validate
$.validator.addMethod("customvalidation",
function(value, element) {
return (/^[A-Za-z\d=#$%#_ \-]+$/.test(value));
},
"Sorry, no special characters allowed"
);
var date = $("#date").val();
var showName = $("#performance").val();
var venue = $("#location").val();
var time = $("#time").val();
var guests = $("#guests").val();
var price = $("#price").val();
//this is where I submit to my database//
});//closes submit
Modify your submit function to run event.preventDefault() if validation fails.
Normally you can use return false, but since you've added this event using a jQuery event, you have to use event.preventDefault() instead as discussed here at stackoverflow.

JQuery validate plugin(bassistance) dependency with selectbox

I have a select box and an input text. The input text is hidden by default. If I select "Other" in select box, the input text will show.
Here I want to apply the dependency validation. If the the selected text is "Other", then the input text should be required. My code shown below:
$(document).ready(function () {
$("#customer-registration").validate({
rules: {
province: {
required: true
},
otherState: {
maxlength: 100,
required: function (element) {
return $('#province option:selected').text() == 'Other';
}
}
},
messages: {
province: {
required: "Please select Province"
},
otherState: {
required: "Please enter other Province"
}
}
});
$("#submitFormBtn").click(function () {
if ($("#customer-registration").valid()) {
$("#customer-registration").submit();
}
});
$("#province").change(function(){
($(this).val() == "Other")? $("#otherState").show() : $("#otherState").hide();
});
});
When I select "Other", validation is happening properly. But when I select some other value in the selectbox, the error "Please enter other Province" still showing. Help me please...thanks in advance..
Hi you need to add something like this
otherState:{
required:{
depends: function(element){
return $('#province option:selected').text() == 'Other';
}
}
}

Resources