My form in NOT asynchronised. I want file input to be required. If I add "required" attribute in that input it show popup required message even if file is uploaded. If I ommit "required" attribute and define validation in kendoUpload configuration to "minFileSize: 1" it only react after file is uploaded, but ignoring that validation if form is submited.
<form method="post" action="foo" enctype="multipart/form-data" id="document-form">
<div class="modal-body">
<input id="files" type="file" name="files" required/>
<input name="description" required/>
<div class="modal-footer">
<button type="submit" class="k-button">Dodaj</button>
</div>
</form>
$('#files').kendoUpload(
{
multiple: false,
validation: {
minFileSize: 1
}
}
)
do not use "required" attribute, use other attribute such as validationMessage
you can use this rule:
rules: {
upload: function(input) {
if (input[0].type == "file" && input.is("[validationMessage]")) {
var len = input.closest(".k-upload").find(".k-file").length;
return len > 0;
}
return true;
}
Related
I have a form with a method get and with an action. When I submit the form, the action parameter contains id as a standard parameter like ?id=1. How do I pass this parameter as path variable?
<form method="get" th:action="#{/mycontroller/}">
<input type="text" id="id" name="id"/>
<input type="submit"/>
</form>
Your html:
<form id="myForm" method="get" th:action="#{/mycontroller/}">
<input type="text" id="id" name="id"/>
<input type="submit"/>
</form>
And then with JQuery you could do something like this:
var $form = $( '#myForm' );
var $idField = $( "#id" );
$form.submit( function( event ) {
// respects th:action="#{/mycontroller/}" and appends id
$form.attr( 'action', $form.attr('action') + $idField.val() );
// otherwise ?id=xx
$idField.prop( "disabled", true );
// submits the form in the normal way !
return;
});
is there any possibility to get error message without ts file, I used this i could validate my input
<form #form="ngForm" (ngSubmit)="logForm(form)" novalidate>
<ion-item>
<ion-label style="color: black;" fixed>User Name</ion-label>
<ion-input type="text" name="username" placeholder="valid user name" [(ngModel)]="username" pattern="[A-Za-z0-9]{3}" required></ion-input>
</ion-item>
<ion-item>
<ion-label style="color: black;" fixed>Email Id</ion-label>
<ion-input type="email" name="email" placeholder="Examples#gmail.com" [(ngModel)]="email"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" required></ion-input>
</ion-item>
<button ion-button type="submit" value="Submit" block>Login</button>
</form>
<p *ngIf=username.valid> The following problems have been found with the username: </p>
what i need is to display error message if the input is not valid, and i should not submit empty form
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
#Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
constructor(public navCtrl: NavController
) {}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
logForm(form) {
console.log(form.value)
if(form.valid) {
console.log(form.value);
/*here i get user entered values as object*/
}
}
You need to add to your form attributes something that will identify what fields we're going to validate, so for username, let's say this:
#userName="ngModel"
You can loose the [(ngModel)] in this case.
and then your validation:
<div *ngIf="userName.errors?.required && userName.touched">
Name is required
</div>
<div *ngIf="userName.errors?.pattern && userName.touched">
Not valid
</div>
So you just use the different validations you have set for input and check whether they match the validations, e.g required, pattern with the prefix of the name of the form control and errors?
So here's how your username validation would look like:
<ion-item>
<ion-label style="color: black;" fixed>User Name</ion-label>
<ion-input type="text" name="username" ngModel #userName="ngModel"
required pattern="[A-Za-z0-9]{3}"></ion-input>
</ion-item>
<div *ngIf="userName.errors?.required && userName.touched">
Name is required
</div>
<div *ngIf="userName.errors?.pattern && userName.touched">
Not valid
</div>
Here's a plunker.
thank you in advance for any help given. I'm just learning jQuery and AJAX and would appreciate some help with the following code. All validation rules work, the form submits and the page does not refresh. The problem is that the form values are not clearing/resetting to default after the submit has triggered. Thoughts?
**********EDITED to include HTML markup*************
<div id="form">
<h1 class="title">Contact Us</h1><!-- title ends -->
<p class="contactUs">Ask about our services and request a quote today!</p><!-- contactUs ends -->
<div id="success"><p>Your message was sent successfully. Thank you.</p></div>
<p id="required">* All fields required.</p>
<form name="form" id="contactMe" method="post" action="process.php" onSubmit="return validateForm()" enctype="multipart/form-data">
<input class="txt" type="text" maxlength="50" size="50" required name="name" value="<?php echo $_GET['name'];?>" placeholder="Name" />
<div id="nameError"><p>Your name is required.</p></div>
<input class="txt" type="text" maxlength="50" size="50" required name="email" value="<?php echo $_GET['email'];?>" placeholder="Email Address" />
<div id="emailError"><p>A valid email address is required.</p></div>
<textarea name="message" rows="6" cols="40" required placeholder="Message"></textarea>
<div id="messageError"><p>A message is required.</p></div>
<input type="hidden" maxlength="80" size="50" id="complete" name="complete" placeholder="Please Keep This Field Empty" />
<input type="submit" value="SUBMIT" name="submit" />
<input type="reset" value="RESET" name="reset" />
</form>
</div><!-- form ends -->
//hide form submit success message by default. to be shown on successfull ajax submission only.
$(document).ready(function() {
if ($('#success').is(':visible')){
$(this).hide()
}
});
//form validation
function validateForm() {
//name
var a=document.forms["form"]["name"].value;
if (a==null || a=="")
{
$('#nameError').fadeIn(250);
return false;
}
//email address
var c=document.forms["form"]["email"].value;
var atpos=c.indexOf("#");
var dotpos=c.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=c.length)
{
$('#emailError').fadeIn(250);
return false;
}
//message
var e=document.forms["form"]["message"].value;
if (e==null || e=="")
{
$('#messageError').fadeIn(250);
return false;
}
}//javascript form validation ends
//ajax submit and clear form on success
$(function () {
$('form').on('submit', function (e) {
var myForm = validateForm();
if (myForm == false){
e.preventDefault();//stop submission for safari if fields empty
}
else{
$.ajax({
type: 'post',
url: 'process.php',
data: $('form').serialize(),
success: function () {
$('#success').fadeIn(250);
if ($('#nameError, #emailError, #messageError').is(':visible')) {
$('#nameError, #emailError, #messageError').fadeOut(250);
}
$('form')[0].reset();//clear form after submit success
}//success ends
});//ajax ends
e.preventDefault();//prevent default page refresh
}//else ends
});//submit ends
});//function ends
//if reset button is clicked AND messages displayed, remove all form html messages
$(document).ready(function() {
$('#form input[type="reset"]').click(function() {
if ($('#success, #nameError, #emailError, #messageError').is(':visible')) {
$('#success, #nameError, #emailError, #messageError').fadeOut(250);
}
});
});
By giving your input id="reset" and/or name="reset", you effectively overwrote the form.reset method of the form because by doing so you made form.reset target the reset button. Simply give it a different id and name value.
Never give elements name or id attributes that equal the name of a property of a dom node.
I do not understand how I can validate a form with jquery validate to display the Submit button or not.
My javascript is as follows:
ko.bindingHandlers.jqValidate = {
init: function (element, valueAccessor, option) {
var element = element;
var validateOptions = {
ignore: [":hidden:not(required)"],
focusCleanup: true,
onsubmit: true
};
function displaySubmitButton() { // Remove/Add class to submit button
if ($('form').valid()) $('.toSave').show();
else $('.toSave').hide();
}
$('form').bind('onchange keyup onpaste', function (event, element) {
if ($('form').valid() === true && $(element).not('.resetForm')) $('.toSave').show();
else if ($(element).not('.resetForm')) $('.toSave').hide();
});
}
};
My form :
<ol class="MutColor13 mouseOver" data-bind="jqValidate: {}">
<li class="rightCol">
<strong>
<label for="iEmailReply"><asp:Literal runat="server" ID="lEmailReply" /></label>
</strong>
<input id="iEmailReply" name="EmailReply" type="text" tabindex="2"
class="MutColor13 email"
data-bind="value: communication.Message.ReplyEmail, valueUpdate: 'afterkeydown'"
required="required" />
</li>
<li class="leftCol">
<strong>
<label for="iEmailFrom"><asp:Literal runat="server" ID="lEmailFrom" /></label>
</strong>
<input id="iEmailFrom" name="EmailFrom" type="text" tabindex="1"
class="MutColor13 email"
data-bind="value: communication.Message.SenderEmail, valueUpdate: 'afterkeydown'"
required="required" />
</li>
<!-- and more form input -->
</ol>
My submit button :
<div class="buttonBlock rightButton" data-bind="fadeVisible: validateMessage()">
<a class="MutButton3 toSave" data-bind="click: saveMessage"><span class="MutButton3">submit</span></a>
</div>
when I type "$ ('form'). valid ()" in the firebug console, all error messages appear. I do not think the submit button is the problem because I have not clicked at this point
How do I enable the display of the error message from the input short change while allowing the display of the submit button if fields (and any other form fields in the page) if all fields are valid?
I was inspired by this question: jquery validate: IF form valid then show submit button
a working demo : http://jquery.bassistance.de/validate/demo/
but the button is displayed continuously
ok I think this could work:
http://jsfiddle.net/Ay972/10/
what I did :
$('form').bind('change oninput', function (event, element) {
console.log('formLive :: ', $(event));
if ($('form').valid() === true && $(element).not('.resetForm')) $('.toSave').show();
else if ($(element).not('.resetForm')) $('.toSave').hide();
});
the 'change oninput' seems to work.
Have problem with fancybox and jquery validate plugin when form is in fancybox container.
For examle (inline):
html:
<script>
$(document).ready(function(){ $.fancybox('
<form class="myform">
<input type="text" name="email" class="email" />
<input type="submit" value="submit" name="submit" />
</form>
');
})
</script>
js file:
$(".myform").validate(
{
rules: {
email: "required",
email: "email"
}
}
);
How to make jquery validation pluging to work in fancybox?
Do two things...
Use the afterLoad FancyBox callback function to initialize .validate() immediately after the form is loaded.
Put the content for FancyBox in a hidden div instead of in your jQuery. It's cleaner.
Note: You may want to reconsider using email for the name attribute. It has potential to cause great confusion since the rule is also called email.
HTML:
<a id="test" href="#inline">Test</a>
<div style="display:none" id="inline">
<form class="myform">
<input type="text" name="email" class="email" />
<input type="submit" value="submit" name="submit" />
</form>
</div>
jQuery:
$(document).ready(function () {
$('#test').fancybox({
afterLoad: function() {
$('.myform').validate({
// rules and options for validate plugin,
rules: {
email: { // "email" is name of the field
required: true,
email: true // "email" is name of the rule
}
}
});
}
});
});
Working DEMO: http://jsfiddle.net/ZMEEW/