Develop Reference

Jqueryvalidate's .validate() method does not execute in ASP Core

I'm trying to submit the form via ajax and it works fine but there was no validation. So I've added the JQuery validation library and added the code into handler as stated in the documentation but it doesnt seem to execute
The cshtml page:
#{
ViewData["Title"] = "CreateProduct";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1 class="text-center">Create Product</h1>
<br>
<form method="post" id="formdata" asp-controller="Product" asp-action="UploadProduct">
<div class="form-group">
<p>Please provide a name for your product:</p>
<input type="text" name="Name" required />
</div>
<div class="form-group">
<p>Please provide a price for your product:</p>
<input type="number" name="Price" required />
</div>
<div class="form-group">
<p>Please provide a description for your product:</p>
<input type="text" name="Description" required />
</div>
</form>
<button class="btn btn-primary" id="subBtn">Upload Files</button>
#section scripts
{
<script>
$(function () {
$('#subBtn').click(function (e) {
var formData = $('#formdata').serialize();
$('#formdata').validate({
debug: true,
submitHandler: function () {
$.ajax({
type: 'POST',
url: '/Product/UploadProduct',
data: formData,
success: function (e) {
Toastify({
text: "Product submition successful!",
duration: 3000,
gravity: "bottom", // `top` or `bottom`
position: 'right', // `left`, `center` or `right`
backgroundColor: 'blue',//"linear-gradient(to right, #00b09b, #96c93d)",
stopOnFocus: true, // Prevents dismissing of toast on hover
onClick: function () { } // Callback after click
}).showToast();
$(':input', '#formdata')
.not(':button, :submit, :reset, :hidden')
.val('')
.prop('checked', false)
.prop('selected', false);
}
}).fail(function (e) {
//toastr.error('Product not added');
});
}
});
});
});
</script>
}
And I've added the reference to the _Layout.cshtml:
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation/dist/additional-methods.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</environment>
Once again I'd like to add that the logic is working, it's just that the validate() method doesn't execute.

The .validate() method is only used to initialize the plugin on your form. It does not belong inside of the click handler of the submit button. You should move the validate() method outside of the client handler , and serialize data inside the submitHandler event :
<script>
$(function () {
$('#formdata').validate({
submitHandler: function () {
var formData = $('#formdata').serialize();
alert("ad");
$.ajax({
type: 'POST',
url: '/Product/UploadProduct',
data: formData,
success: function (e) {
Toastify({
text: "Product submition successful!",
duration: 3000,
gravity: "bottom", // `top` or `bottom`
position: 'right', // `left`, `center` or `right`
backgroundColor: 'blue',//"linear-gradient(to right, #00b09b, #96c93d)",
stopOnFocus: true, // Prevents dismissing of toast on hover
onClick: function () { } // Callback after click
}).showToast();
$(':input', '#formdata')
.not(':button, :submit, :reset, :hidden')
.val('')
.prop('checked', false)
.prop('selected', false);
}
}).fail(function (e) {
//toastr.error('Product not added');
});
}
});
});
</script>
You can then use submit button inside form tag to trigger submit :
<form method="post" id="formdata" asp-controller="Product" asp-action="UploadProduct">
<div class="form-group">
<p>Please provide a name for your product:</p>
<input type="text" name="Name" required />
</div>
<div class="form-group">
<p>Please provide a price for your product:</p>
<input type="number" name="Price" required />
</div>
<div class="form-group">
<p>Please provide a description for your product:</p>
<input type="text" name="Description" required />
</div>
<button type="submit" class="btn btn-primary" name="submit" id="ajaxsubBtn1">Upload Files</button>
</form>

trigger jquery modal popup on form submit

This is my first time working with jquery modals. I'm trying to display the popup only when the form is submitted. But instead, it's displaying on page load. How do I fix it?
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
<div id="dialog-confirm" title="Not so fast">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px
20px 0;"></span>Did you want to add a third for only $50? Click Yes to add</p>
</div>
<form id="orderform" action="/action_page.php">
Package 1:<br>
<input type="text" name="packageonename" value="">
<br>
Package 2:<br>
<input type="text" name="packagetwoname" value="">
<br><br>
<input type="submit" value="Submit">
</form>

In order to prevent the dialog from automatically opening you can set autoOpen property to false when initializing the dialog.
Then, on form's submit event, you could open the dialog by calling element.dialog("open").
Note that I have added an event.preventDefault() in the submit event handler to prevent the form from submitting.
$(function() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
autoOpen: false,
buttons: {
"Yes": function() {
$(this).dialog("close");
},
"No": function() {
$(this).dialog("close");
}
}
});
$("#orderform").on("submit", function(e) {
$("#dialog-confirm").dialog("open");
e.preventDefault();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="dialog-confirm" title="Not so fast">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px
20px 0;"></span>Did you want to add a third for only $50? Click Yes to add</p>
</div>
<form id="orderform" action="/action_page.php">
Package 1:<br>
<input type="text" name="packageonename" value="">
<br> Package 2:<br>
<input type="text" name="packagetwoname" value="">
<br><br>
<input type="submit" value="Submit">
</form>

You can do like this
$('#orderform').submit(function() {
$("#dialog-confirm").dialog("open");
return true; // return false to cancel form action
});

JQuery validate disable button until all fields are active, but it should not show error on every key press

Here is my Fiddle
Here is the html
<form action='includes/pgd_cc.php' METHOD='POST' id="ccSelectForm">
<div class="control-group">
<label class="control-label" for="inputEmail"><strong>Email Address</strong>
</label>
<div class="controls">
<input type="text" name="inputEmail" placeholder="jane.smith#email.com" id="inputEmail" />
</div>
<label class="control-label" for="inputEmailConfirm"><strong>Confirm Email Address</strong>
</label>
<div class="controls">
<input type="text" name="inputEmailConfirm" placeholder="jane.smith#email.com" id="inputEmailConfirm" />
</div>
</div>
<button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="Click me to buy">Credit Card Checkout »</button>
Here is the script
$(document).ready(function () {
$('#ccSelectForm').validate({
rules: {
inputEmail: {
required: true,
email: true
},
inputEmailConfirm: {
equalTo: '#inputEmail'
}
}
});
$('#ccSelectForm input').on('keyup blur', function () {
if ($('#ccSelectForm').valid()) {
$('button.btn').prop('disabled', false);
} else {
$('button.btn').prop('disabled', 'disabled');
}
});
});
As i am doing
$('#ccSelectForm input').on('keyup blur', function () {
if ($('#ccSelectForm').valid()) {
$('button.btn').prop('disabled', false);
} else {
$('button.btn').prop('disabled', 'disabled');
}
});
My Form is always getting validated and showing errors.
I don't want to show the errors in the form while the user type a single word itself.
I want to show errors only after going to next field and it should only validate the current field is typed.
How can i alter this code to achieve this..

It is better to bind it to the submit. So that, it validates everything only once, and not every time for every input, when the keyup is fired. Try this:
$('#emailSubmit').on('click', function () {
return $('#ccSelectForm').valid();
});
Fiddle: http://output.jsbin.com/valiwetese

How to subscribe to an MVC checkbox change event in JQUERY

I'm trying to latch onto a checkbox change event using jQuery, currently I have this:
<script type="text/javascript">
$(document).ready(function () {
$('.timepicker').datetimepicker({ datepicker: false, format: 'H:i' });
$('.mondaystartfinish').hide();
//subscribe to change events
$('#IsMonday').change(function () {
RunsOnMondays();
});
});
function RunsOnMondays() {
if ($('#IsMonday').prop('checked') == 'true') {
$('.mondaystartfinish').slideDown();
} else {
$('.mondaystartfinish').slideUp();
}
}
</script>
However in debug when I check/uncheck the box the RunsOnMondays() method is not firing.
I have tried using this also but still didn't work:
$('IsMonday').prop('checked').change(function () { RunsOnMondays();});
Browser output
<div class="form-group">
<label class="control-label col-md-2" for="IsMonday">Monday</label>
<div class="col-md-10">
<input class="check-box" data-val="true" data-val-required="The IsMonday field is required." id="IsMonday" name="IsMonday" type="checkbox" value="true" /><input name="IsMonday" type="hidden" value="false" />
<span class="field-validation-valid" data-valmsg-for="IsMonday" data-valmsg-replace="true"></span>
</div>
</div>
<div class="startfinish">
<div class="form-group">
<div class="mondaystartfinish">
<label class="control-label col-md-2" for="MondayFrom">Monday Start</label>
<div class="col-md-10">
<input class="timepicker" data-val="true" data-val-date="The field MondayFrom must be a date." id="MondayFrom" name="MondayFrom" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="MondayFrom" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
<div class="startfinish">
<div class="form-group">
<div class="mondaystartfinish">
<label class="control-label col-md-2" for="MondayTo">Monday Finish</label>
<div class="col-md-10">
<input class="timepicker" data-val="true" data-val-date="The field MondayTo must be a date." id="MondayTo" name="MondayTo" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="MondayTo" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>

The reason it does not work is that this is not true true == 'true' is actually false: http://jsfiddle.net/TrueBlueAussie/2wwz1ore/6/
prop('checked') returns a boolean value! No need for == 'true'.
http://jsfiddle.net/TrueBlueAussie/2wwz1ore/1/
$(document).ready(function () {
//$('.timepicker').datetimepicker({ datepicker: false, format: 'H:i' });
$('.mondaystartfinish').hide();
// subscribe to change events
$('#IsMonday').change(function () {
RunsOnMondays();
});
});
function RunsOnMondays() {
if ($('#IsMonday').prop('checked')) {
$('.mondaystartfinish').slideDown();
} else {
$('.mondaystartfinish').slideUp();
}
}
Better yet, use slideToggle(): http://jsfiddle.net/TrueBlueAussie/2wwz1ore/3/
// subscribe to change events
$('#IsMonday').change(function () {
$('.mondaystartfinish').slideToggle($(this).prop('checked'));
});
If (and I very much doubt it) your element is added dynamically, use a delegated event handler attached to a non-change ancestor element (document is the default if nothing else is closer/convenient)
e.g.
$(document).on('click' , '#IsMonday', function () {
$('.mondaystartfinish').slideToggle($(this).prop('checked'));
});

You could use the below as follows:
$('#IsMonday').change(function(){
RunsOnMondays(this.checked);
});
function RunsOnMondays(isChecked) {
if (isChecked) {
$('.mondaystartfinish').slideDown();
} else {
$('.mondaystartfinish').slideUp();
}
}
jsFiddle

jQuery submit 'this' form

I'm trying to submit a form, once the user has accepted they want to continue via the jQuery UI Dialog.
<form method="POST" action="url" onsubmit="return APP.dom.confirm(this);">
<button type="submit" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></button>
</form>
My APP.dom.confirm method looks like:
confirm: function(form) {
$("#dialog-confirm").dialog({
modal: true,
buttons: {
"Confirm": function() {
$(form).submit();
},
"Cancel": function() {
$(this).dialog("close" );
}
}
});
return false;
}
This works, however when they click confirm I'd like the form to get submitted.
$(form).submit();
That doesn't work. Logging it out I get the above HTML back. I've tried variations of, to no avail:
$(form).clostest('form').submit();
How do I submit this?

Change
$(form).submit();
to
form.submit();
When you call submit on a jQuery object, it calls your submit handler again. Calling it directly on the DOM element does not.
Example (interestingly, Stack Snippets won't let me submit a form, not even with target="_blank"):
var nesting = 0;
function submitHandler(form) {
var which = $(form).find("input[type=radio]:checked").val();
++nesting;
if (nesting > 5) {
snippet.log("Nested to 5, gave up");
} else {
if (which === "jQuery") {
snippet.log("Calling via jQuery, nesting = " + nesting);
$(form).submit();
} else {
snippet.log("Calling via DOM, nesting = " + nesting);
form.submit();
}
}
--nesting;
return false;
}
<form id="the-form"
onsubmit="return submitHandler(this);"
action="http://www.google.com/search"
target="_blank"
method="GET">
<input type="text" name="q" value="kittens">
<div>
<label>
<input type="radio" name="opts" value="jQuery"> Submit with jQuery
</label>
</div>
<div>
<label>
<input type="radio" name="opts" value="DOM"> Submit with DOM
</label>
</div>
<button>Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

confirm: function() {
var that = this;
$("#dialog-confirm").dialog({
modal: true,
buttons: {
"Confirm": function() {
$(that).submit();
},
"Cancel": function() {
$(this).dialog("close" );
}
}
});
}
Replace onsubmit="return APP.dom.confirm(this);" by
$('form').on('submit', APP.dom.confirm);