jQuery Validation error - jquery-ui

I have been struggling with this jQuery Validation Plugin.
Here is the code:
<script type="text/javascript">
$(function() {
var validator = $('#signup').validate({
errorElement: 'span',
rules: {
username: {
required: true,
minlenght: 6
//remote: "check-username.php"
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
agree: "required"
},
messages: {
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 6 characters"
//remote: "Somenoe have already chosen nick like this."
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
var root = $("#wizard").scrollable({size: 1, clickable: false});
// some variables that we need
var api = root.scrollable();
$("#data").click(function() {
validator.form();
});
// validation logic is done inside the onBeforeSeek callback
api.onBeforeSeek(function(event, i) {
if($("#signup").valid() == false){
return false;
}else{
return true;
}
$("#status li").removeClass("active").eq(i).addClass("active");
});
//if tab is pressed on the next button seek to next page
root.find("button.next").keydown(function(e) {
if (e.keyCode == 9) {
// seeks to next tab by executing our validation routine
api.next();
e.preventDefault();
}
});
$('button.fin').click(function(){
parent.$.fn.fancybox.close()
});
});
</script>
And here is the error:
$.validator.methods[method] is undefined
/js/jquery-validate/jquery.validate.min.js
Line 15
I am completely confused... Maybe some kind of handler is needed?
I would be grateful for any kind of answer.

I think it is simply a typo:
minlenght: 6
should be
minlength: 6

Related

How to prevent select2 to call select2:close the second time when selectOnClose is set to true?

I am using Select2 V. 4.0.10
I want to have a select2 that behaves the same way when you select using the Enter key and the Tab key.
What happens is that when selecting using the Tab key, the close event is called twice, which is not what was intended to do.
var data = [
{ id: 0, text: 'New' },
{ id: 1, text: 'In Process' },
{ id: 2, text: 'Draft' },
{ id: 3, text: 'Submitted' },
{ id: 4, text: 'Deleted' }
];
$(".test").select2({
allowClear: true,
selectOnClose: true,
data: data,
placeholder: "Select a status"
});
$("select.test", "body").off("select2:close").on("select2:close", function (e){
// This is called twice
console.log("select2:close");
});
select.test {
width: 200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<select class="test"></select>
Here are the sequences of the select2 events that are triggered when selecting with the Tab/Enter key.
TAB
select2:opening
select2:open
select2:closing
select2:selecting
change
change.select
select2:closing
select2:close
select2:select
select2:close
ENTER
select2:opening
select2:open
select2:selecting
change
change.select
select2:closing
select2:close
select2:select
As the pattern in always the same, the solution was to create a variable that would be toggled on when select2:select was triggered, and use that to see if it was be used before.
Notice, instead of using the global window object you should rather use a class variable or a prototype property to store this boolean.
var data = [
{ id: 0, text: 'enhancement' },
{ id: 1, text: 'bug' },
{ id: 2, text: 'duplicate' },
{ id: 3, text: 'invalid' },
{ id: 4, text: 'wontfix' }
];
window._select2Select = false;
$(document).on('select2:select', "select", function (e) {
window._select2Select = true;
});
$(".test").select2({
allowClear: true,
selectOnClose: true,
data: data,
placeholder: "Select a status"
});
$("select.test", "body")
.off("select2:close")
.on("select2:close", function(e) {
if(window._select2Select){
window._select2Select = false;
return;
}
console.log("select2:close");
window._select2Select = false;
});

Square Payment Form Request Card Nonce not working in versions of safari

I seem to be having an issue with the requestCardNonce() function for some safari users This is using the Javascript API in my .net MVC application.
The current version I'm testing on appears to be working (13.0.4) but users are still reporting an inability to complete their orders with previous versions of safari. When filling in their information they're able to see the dialog that contains the fields for the Card Name, Number, CVV, and Postal code and expiration date but can't seem to proceed to the next dialog. The onGetCardNonce(event) function seems to be having issues executing properly.
The code I have currently looked like this
if (gateway == "Square Payment Gateway") {
paymentForm = new SqPaymentForm({
applicationId: appId,
inputClass: 'sq-input',
autoBuild: false,
cardNumber: {
elementId: 'sq-card-number',
placeholder: 'Card Number'
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code',
placeholder: 'Postal'
},
// SqPaymentForm callback functions
callbacks: {
cardNonceResponseReceived: function (errors, nonce, cardData) {
let errMsg = "";
if (errors) {
// Log errors from nonce generation to the browser developer console.
console.error('Encountered errors:');
errors.forEach(function (error) {
console.error(' ' + error.message);
errMsg += ' ' + error.message;
});
alert('Encountered errors' + errMsg);
return;
}
$("#CardNumber").val(cardData["last_4"]);
$("#squareToken").val(nonce)
$("#form-container").dialog("close");
var isValid = true;
$('#CardName,#CardNumber').each(function () {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "",
"background": ""
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if ($("#Total").val() == "0.00" || $("#Total").val() == "0")
isValid = true;
if (isValid == false) {
$('#PayCreditCard')[0].disabled = false;
}
else {
var targetUrl = $(this).attr("href");
// Open Terms & Conditions
$("#dvTermsConditions").dialog("open");
$("#dvTermsConditions").dialog({
autoOpen: false,
modal: true,
buttons: {
"Proceed": function () {
if ($('#AgreeToTerms').is(':checked')) {
$(':input[type="submit"]').prop('disabled', true);
$(this).dialog("close");
$("#frmCheckOut").submit();
}
else {
alert("You must agree to the terms & conditions.");
}
},
"Cancel": function () {
$('#PayCreditCard')[0].disabled = false;
$(this).dialog("close");
}
}
});
}
}
}
});
paymentForm.build();
function onGetCardNonce(event) {
// Don't submit the form until SqPaymentForm returns with a nonce
event.preventDefault();
// Request a nonce from the SqPaymentForm object
paymentForm.requestCardNonce();
}
function closeCC() {
$("#form-container").dialog("close");
}
}
Originally the issue was that payment form was not found so I moved the definition of that outside the if statement and that seemed to clear up the issue for safari 13.0.4+
Does anyone have suggestions on how to make the square payment form (v2) work on all (or at least the last 3+ years) of versions of Safari (not on mobile)?

Input validation message toggle for blur and focusIn

I want to trigger the validation only for input "blur" instead of typing on it. So I have used the method validateTrigger:'onBlur' and its worked fine for me as expected. After user focus/click again the input, the validation message should disappear, any solution?
<FormItem>
{getFieldDecorator('email', {
rules: [
{
type: 'email', message: 'Valid E-mail required!',
},
{ required: true, message: 'E-mail required!', whitespace:true }
],
validateTrigger:'onBlur'
})(
<Input
placeholder="Email"
/>
)}
This can be done by using ant design validateStatus parameter. You can dynamically change the statuses from given sets, i.e, 'success', 'warning', 'error', 'validating'.
validateStatus: validate status of form components which could be 'success', 'warning', 'error', 'validating'.
You need to functions, one onBlur and other onFocus. FormItem can be written as:
<FormItem
validateStatus={this.state.showError && userNameError ? "error" : ""}
help={
this.state.showError && userNameError
? "Valid E-mail required!"
: ""
}
>
{getFieldDecorator("userName", {
validateTrigger: "onBlur",
rules: [
{ type: "email", message: "Valid E-mail required!" },
{ required: true, message: "Please input your username!" }
]
})(
<Input
placeholder="Email"
onBlur={this.handleBlur}
onFocus={this.handleFocus}
/>
)}
</FormItem>
And the two methods can be written as:
handleBlur = e => {
this.setState({ showError: true });
};
handleFocus = e => {
this.setState({ showError: false });
};
Working demo is on codesandbox.io.

Kendo.Web Grid Popup Create with ComboBox

I am using the free Kendo web controls. I have used the grid view in several places before and decided to use the popup style editing for my current project.
I have most of it working. I have three combo boxes for category, bank account and payee and when I edit an existing item, the model object passed back to my MVC action has the correct values in it. However, when I click on the create button, the three combo box values are returned as null to the controller.
Here is the CSHTML code for this view:
#using System
#using System.Linq
#{
ViewBag.Title = "Transactions";
}
#section Head
{
<link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/kendo/kendo.web.min.js"> </script>
}
#section featured
{
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title</h1>
</hgroup>
</div>
</section>
}
<div id="grid"></div>
<script>
$(function() {
$("#grid").kendoGrid({
height: 350,
toolbar: [{ name: "create", text: "Create New Transaction" }],
columns:
[
{ field: "Date", width: "100px", template: '#= kendo.toString(Date,"MM/dd/yyyy") #' },
{ field: "Amount", format: "{0:c}", width: "100px" },
{ field: "Category", width: "80px", editor: categoryDropDownEditor, template: "#=Category.Name#" },
{ field: "BankAccount", title: "Account", width: "80px", editor: bankAccountDropDownEditor, template: "#=BankAccount.Name#" },
{ field: "Payee", width: "80px", editor: payeeDropDownEditor, template: "#=Payee.Name#" },
{ command: ["edit", "destroy"], title: " ", width: "160px" }
],
editable: { mode: "popup", confirmation: "Are you sure you want to delete this transaction?" },
pageable:
{
refresh: true,
pageSizes: true
},
sortable: true,
filterable: false,
dataSource:
{
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 7,
schema:
{
data: "Data",
total: "Total",
model:
{
id: "Id",
fields:
{
Id: { editable: false, nullable: true },
Date: { type: "Date" },
Amount: { type: "number", validation: { required: true, min: 0 } },
Category: { validation: { required: true } },
BankAccount: { validation: { required: true } },
Payee: { validation: { required: true } },
Note: { validation: { required: false } }
}
}
},
batch: false,
transport:
{
create:
{
url: "#Url.Action("Create", "Transaction")",
contentType: "application/json",
type: "POST"
},
read:
{
url: "#Url.Action("Read", "Transaction")",
contentType: "application/json",
type: "POST"
},
update:
{
url: "#Url.Action("Update", "Transaction")",
contentType: "application/json",
type: "POST"
},
destroy:
{
url: "#Url.Action("Delete", "Transaction")",
contentType: "application/json",
type: "POST"
},
parameterMap: function(data)
{
return JSON.stringify(data);
}
}
}
});
function categoryDropDownEditor(container, options)
{
$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList(
{
autoBind: true,
dataValueFileld: "Id",
dataTextField: "Name",
dataSource:
{
type: "json",
transport: { read: "#Url.Action("GetCategories", "Transaction")" }
}
});
}
function bankAccountDropDownEditor(container, options)
{
$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList(
{
autoBind: true,
dataValueFileld: "Id",
dataTextField: "Name",
dataSource:
{
type: "json",
transport: { read: "#Url.Action("GetBankAccounts", "Transaction")" }
}
});
}
function payeeDropDownEditor(container, options)
{
$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList(
{
autoBind: true,
dataValueFileld: "Id",
dataTextField: "Name",
dataSource:
{
type: "json",
transport: { read: "#Url.Action("GetPayees", "Transaction")" }
}
});
}
});
</script>
The binding to the kendo combo box must be working, otherwise the edit would fail as well. All I can think is that the object is not created correctly. Also, it selects the first item in the combo box by default, but even so, does not bind the value.
Following is the code for my create and update actions:
[HttpPost]
public ActionResult Create(TransactionModel transactionModel)
{
var transaction = _moneyBO.CreateTransaction();
Mapper.Map(transactionModel, transaction);
_moneyBO.UpdateTransaction(transaction);
return Json(Mapper.Map<TransactionModel>(transaction));
}
public ActionResult Update(TransactionModel transactionModel)
{
var transaction = _moneyBO.Transactions.SingleOrDefault(x => x.Id == transactionModel.Id);
if (transaction == null)
return View("NotFound");
Mapper.Map(transactionModel, transaction);
_moneyBO.UpdateTransaction(transaction);
return Json(Mapper.Map<TransactionModel>(transaction));
}
I have not found a good example using the popup custom edit. The example on the Kendo site works inline, but if you change the example to popup it does not work.
I have a same problem. Write, if you solve it, please
I found, that Kendo think that "null" (default for int?) is ObservableObject (while initialization of ComboBox), thats why it can't be parsed to "number". If you edit item (not create), value id not "null" and model bindind work's fine
Not sure if it's the only issue here but in your code example it looks like the initialization of your dropdown isn't quite correct. You have written dataValueFileld which should be dataValueField
kendoDropDownList({
autoBind: true,
dataValueFileld: "Id", <-- Incorrect spelling
dataTextField: "Name",
dataSource:
{
type: "json",
transport: { read: "#Url.Action("GetPayees", "Transaction")" }
}
});

Enable tabs with jquery ui tabs issue

I am trying to enable the next tab at the end of the function below.
Here is my function (UPDATED)
var $signup = $('#signup-content').tabs({disabled: [1,2],
show: function(event, ui) {
// Validates Form on Slide # 1
$("#createAccount").validate({
meta: "validate",
errorElement: "em",
errorClass: "error",
validClass: "success",
highlight: function(element, errorClass, validClass) {
$(element).closest("div.required").removeClass(validClass);
$(element).closest("div.required").addClass(errorClass);
$(element).addClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest("div.required").removeClass(errorClass);
$(element).closest("div.required").addClass(validClass);
$(element).removeClass(errorClass);
},
errorPlacement: function(error, element) {
if (element.attr("name") == "month"
|| element.attr("name") == "day"
|| element.attr("name") == "year")
error.insertAfter("#year");
else
error.addClass("hide");
},
debug:true,
groups: {birthday: "month day year"
},
rules: {
firstname:{required:true},
lastname:{required:true},
email: {required: true, email: true},
confirm_email: {required: true, equalTo: "#email"},
password:{required: true},
confirm_password:{required: true,equalTo: "#password"},
zipcode: {required:true, min:5},
month:{required:true},
day:{required:true},
year:{required:true},
gender:{required:true},
agree:{required:true}
},
messages: {
month: {required: "Month Is Missing"},
day: {required: "Day Is Missing"},
year: {required: "Year Is Missing"}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
beforeSubmit: function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
alert('About to submit: \n\n' + queryString);
return true;
},
success: function showResponse(formData) {
$('html, body').animate({scrollTop:'0px'}, 500);
$signup.tabs('option', 'enabled', [1]);
$signup.tabs('select', 1); // Go To Slide # 2
$('#message-container').addClass("notice").append('<h3>Your Account Has Been Created!</h3><img src="/assets/images/close.png" alt="Close" title="Close"/>');
$('#message-container').fadeIn(1200, function(){
$('#close').click(function(){$('#message-container').fadeOut(1200);});});
return false;}});}});
this worked for me, at least with version 1.7 :
$signup.tabs('enable', 1);
According to the instructions, you can't use:
$signup.tabs('option', 'enabled', [1]);
but instead use:
$signup.data('disabled.tabs', []);
what that does is clear the list of disabled tabs.

Resources