Develop Reference

HTML5 form validation without submit button

i want to validate the form inputs without an type="submit" button.
How can i do this?
I tried this ->
<script type="text/javascript">function validateForm() {
$('#form1')[0].checkValidity()
if( document.form1.vorname.value == "" )
{
return false;
}
if( document.form1.nachname.value == "" )
{
return false;
}
if( document.form1.postleitzahl.value == "" )
{
return false;
}
if( document.form1.email.value == "" )
{
return false;
}
if( document.form1.telefon_optin_Ja.value == "" )
{
return false;
}
if( document.form1.ort.value == "" )
{
return false;
}
if( document.form1.straße.value == "" )
{
return false;
}
if( document.form1.Anrede.value == "" )
{
return false;
}else {
$('#modal_absenden').modal({
backdrop: 'static',
keyboard: 'false',
})
}
}
</script>
My form name is: form1 , button -> `Absenden
The "background" of the question is: I want to validate the form inputs first, then (if all inputs ok) it should opens a modal, where u can select the redirect page (redirect yes, redirect no) then it submit the form via post to mail.php.
I hope u understand my question, if u have questions, pls ask. (My english is not so good..)
Thank you for help.

You have said about HTML5.
Then that means all you have to do is to use checkValidity() along with
<input type="text" name="name" required>
<input type="email" name="email" required placeholder="Enter a valid email address">
Here is the nice article about using HTML5 validation.
I have not used by myself. But I am glad to know a bit from your post.
http://www.the-art-of-web.com/html/html5-form-validation/
If you want to use jQuery one then go for validation.
http://www.codeproject.com/Articles/213138/An-Example-to-Use-jQuery-Validation-Plugin

You could call your validate function everytime an input changes:
$('#form1 input').change(validateForm);

Using
$("#form1 input").on('change,blur', validateForm);
function validateForm() {
// Caution : this refers to the HTMLElement
}
You shoud consider to use a jQuery form validation like library like http://formvalidator.net/ or http://jqueryvalidation.org/ or create yours.
Cheers

So I guess you want to do frontend validation with Javascript. There are wrapped library to do this. E.g., validate.js, verifyjs, and this one, ...
And you can bind the validation process on the blur event of an input
JQuery validate is a good choice with clear documentation. You just need to download the .js library and place it somewhere under your web folder, and using tag to include it. And call the .validate() function on the form you want to validate. That should be done.
$('input').on('blur', function(){
$("#myForm").validate();
});

Validation in jQuery and redirect new page with error fields

How to validate my all fields by using jquery ?
if validation fails,i want to redirect to new page and list out all validation failed fields.If it is success i will do insert operation.
Example
<input class="textbox validate"type="text">
<input class="textbox validate"type="text">
//validate the all the field with having "validate" class
$(".validate").each
I am using MVC-3 but i want to do in custom j-query logic. I am a new person in j-query.
Thanks in advance !

Assuming you have a single function for validation:
function validate (text) {
...
return true; //or false
}
Then one thing you can do:
var validationErrors = [],
errorPageURL = "BASE URL for your error page";
$(".validate").each(function (index, element) {
if (!validate(element.val()) {
validationErrors.push($(element).id);
}
});
if (validationErrors.length === 0) {
//Do your input magic
} else {
window.location.replace(errorPageURL + "?errors=" + encodeURI(JSON.stringify(validationErrors)));
}
A few reference links:
jQuery val method
jQuery each method
About client-side redirects (with/without jQuery)

Create Bootstrap alert in JQuery

I'm new to bootstrap and was using noty before to generate alerts, however I'd like to try and do this without adding more plugins because bootstrap is already somewhat heavy in loading. I can create the text easily enough, it's just when I add the class in.
This is my Jquery:
$(function(){
$("#passsubmit").click(function(event){
event.preventDefault();
$(".error").hide();
var hasError = false;
var newpass = $("#password").val();
var checkVal = $("#password-check").val();
if (newpass == '') {
$("#password").after('<span class="error">Please enter a password.</span>');
hasError = true;
} else if (checkVal == '') {
$("#password-check").after('<span class="error">Please re-enter your password.</span>');
hasError = true;
} else if (newpass != checkVal ) {
$("#password-check").after('<span class="error">Passwords do not match.</span>');
hasError = true;
}
if(hasError == true) {return false;}
if(hasError == false) {
$.ajax({
type: "POST",
url: "resource/changepassword.php",
data: {newpass:newpass},
success: function(){
//alert("Password Changed");
$("#password").val("")
$("#password-check").val("");
$(document.createElement('<div class="alert alert-success">Password Changed</div>'));
}
});
};
});
});
This is the part it is failing on due to an invalid character, which I assume is the "
$(document.createElement('<div class="alert alert-success">Password Changed</div>'));
I know that I could simply have this in the html:
<div class="alert alert-success" style="visibility: hidden">Password Changed</div>
And then just show it, but that wouldn't be particularly good when I want many different alerts across multiple pages...
There must be a better way of doing this?
Thank you :)

You just have you syntaxes mixed up:
document.createElement(tagName)
is a DOM method that takes a single tag name as a string.
$(html)
is a jQuery method that will return DOM elements given a complex HTML string.
You typically only use one, and each for its own purpose.
Then, just figure out where you want the new div to go, pick any DOM insertion method*, and then call like this:
$('#selector').after('<div class="alert alert-success">Password Changed</div>');
Here's a working Demo in fiddle
* DOM Insertion Types:
There are more methods, but these are some popular ones
Around
Inside
Append
Prepend
Outside
After
Before

How to escape an entity within jQuery function using jAlert?

Here's sample code:
$("#register-button").click(function(){
if (uname=="" || pname=="" || cemail=="" || remail=="") {
jAlert('Please fix the validation error','Title™');
return false;
}
});
Basically, if username, password, or email fields aren't filled correctly, a jAlert pops up that says "Please fix the validation error" containing a title that's trademarked. Unfortunately, this trademark is not properly an entity and does not render correctly.
I tried the following but it does not work correctly:
$("#register-button").click(function(){
if (uname=="" || pname=="" || cemail=="" || remail=="") {
jAlert('Please fix the validation error','Title™');
return false;
}
});
As you can see, the only difference is that I've included ™. However, it does not turn into ™ when the jAlert pops up.
How do I escape the jQuery in order for this entity to properly render?

Just define this on function level in your code:
String.prototype.htmlEscape = function () {
return this.replace(/&/g, "&").replace(/"/g, """).replace(/'/g, "'").replace(/</g, "<").replace(/>/g, ">");
}
And now you can use it as:
jAlert("Please fix the validation error".htmlEscape(),"Title™".htmlEscape());

Call MVC 3 Client Side Validation Manually for ajax posts

I am creating an MVC 3 web application. I want to use Data Annotations on my entity class and then use unobtrusive client side validation before making a post back to the server. This works fine when making a regular post. I get validation and the validation summary if any of the fields are not valid. However, I want to post back the information via ajax and json. How can I 'manually' validate the form on the client side first then make my ajax post back to the server. Below is a summarized version of my code.
public class Customer
{
[Required(ErrorMessage = "The customer's first name is required.")]
public string FirstName { get; set; }
[Required(ErrorMessage = "The customer's last name is required.")]
public string LastName { get; set; }
}
<% using (Html.BeginForm()) { %>
<%: Html.LabelFor(model => model.FirstName, "First Name")%>
<%: Html.TextBoxFor(model => model.FirstName, new { #class = "TextBox", id = "Customer.FirstName" })%>
<%: Html.ValidationMessageFor(model => model.FirstName, "*")%>
<%: Html.LabelFor(model => model.LastName, "Last Name")%>
<%: Html.TextBoxFor(model => model.LastName, new { #class = "TextBox", id = "Customer.LastName" })%>
<%: Html.ValidationMessageFor(model => model.LastName, "*")%>
<div id="CustomerEditSave" class="Button CustomerEditButtons" style="margin-right:40px;">
Save
</div>
<%: Html.ValidationSummary(true) %>
<% } %>
I have tried this code but it only validates the first name and does not display the validation summary.
$("#CustomerEditSave").click(function () {
$(form).validate();
//Ajax call here
});

Try:
//using the form as the jQuery selector (recommended)
$('form').submit(function(evt) {
evt.preventDefault();
var $form = $(this);
if($form.valid()) {
//Ajax call here
}
});
//using the click event on the submit button
$('#buttonId').click(function(evt) {
evt.preventDefault();
var $form = $('form');
if($form.valid()) {
//Ajax call here
}
});
This should work with jQuery ajax and MSAjax calls. Could also try using http://nuget.org/packages/TakeCommand.js or https://github.com/webadvanced/takeCommand it will automatically handle this for you.

I have been phaffing about with MVC client side validation for days:
Don't use .click use .submit:
$("#MyForm").on('submit',function () {
if($("#MyForm").valid())
{
//Do ajax stuff
}
//Return false regardless of validation to stop form submitting
//prior to ajax doing its thing
return false;
});
I'm going add an update to this, consider cancelling the event rather than returning false (or do both):
$("#MyForm").on('submit',function (e) {
if($("#MyForm").valid())
{
//Do ajax stuff
}
e.preventDefault();
//Return false regardless of validation to stop form submitting
//prior to ajax doing its thing
return false;
});

At least in my case (MVC 5), it was also necessary to add the following code or else .valid() would always return true:
$(function () {
$(document).ajaxComplete(function(event, request, settings){
//re-parse the DOM after Ajax to enable client validation for any new form fields that have it enabled
$.validator.unobtrusive.parse(document);
});
});
See http://johnculviner.com/the-unobtrusive-libraries-client-validation-on-ajax-in-asp-net-mvc-3/

IMPORTANT!!:
Paul's solution is the correct answer to the question, not Dr Rob's.
Although you can just use valid() instead of validate().form().
But more importantly, there really is no reason to restrict your code as suggested by Dr Rob, ie, not .click and only use .submit. That isn't what solved the problem! What solved the problem was wrapping the $.ajax(...) call in the if statement. Ie:
if($("#MyForm").valid())
{
//call to $.ajax or equivalent goes in here.
}
I think that needs clarifying as otherwise the real answer to the problem is obfuscated.

$(YourForm).data('unobtrusiveValidation').validate()

if(!$('#myform').data('unobtrusiveValidation').validate())
{
// add your extra custom logic
}
else
{
$('#myform').submit();
}
It triggers the validation and returns a boolean, so you can check before submit.

.Valid() works. i.e it tells you whether your form is valid. However alone it does not help to show AND hide messages correctly. here's my manual validation method
function validate()
{
//valid() not only tells us whether the form is valid but
//also ensures that errors are shown !!!
if ($("form").valid())
{
//if the form is valid we may need to hide previously displayed messages
$(".validation-summary-errors").css("display", "none");
$(".input-validation-error").removeClass("input-validation-error");
return true;
}
else
{
//the form is not valide and because we are doing this all manually we also have to
//show the validation summary manually
$(".validation-summary-errors").css("display", "block");
return false;
}
}

I tried all of the above solutions but none worked on MVC5.
I am using jQuery v2.1.4 and jQuery.Validation v1.11.1.
I need to trigger validation while on page render. Only below one worked for me.
$(document).ready(function () {
...
validateForm();
}
function validateForm() {`enter code here`
var elem = document.getElementById('btnSave');
elem.click();
}
$('#btnSave').click(function (evt) {
//evt.preventDefault();
var form = $('form');
if (form.valid()) {
//Ajax call here
}
//$(".validation-summary-errors").css("display", "block");
});
function Validate() {
// If no group name provided the whole page gets validated
Page_ClientValidate();
}