When i use yui3`s io-form module to post a form, i found the field value that server reseived is null...
Any help is welcome.
<form name='testajax' id="testajax1" >
<input type="text" name="test1" id="test1" ></input>
<input type="text" name="test2" >
<input type="text" name="test3" id="result" >
<input type="submit" value="submit" id="submit">
</form>
Y.io('/ajax/test',{
method:'POST',
form: {
id:Y.one('#testajax1'),
useDisabled: true,
},
on:{
complete:function(id,response){
Y.log(Y.one('#test1').get('value'));
},
start:function(id,response){
Y.log(Y.one('#test1').value);
}
}
});
You are passing a Y.Node to form.id and the docs indicate that it takes either a string or a "formObject" which I'm assuming means a "form element". I don't believe a Y.Node is a valid (which is an unfortunate API choice if true). Try switching your code to:
form: {
id: "#testajax1"
}
http://yuilibrary.com/yui/docs/io/#serializing-html-form-as-data
Related
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.
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/
i have a contact form on http://daniloportal.com/NPC2/contact.html
Now this ajax script works very well, but i have other contact forms that i would like to use the same script for. so when i tried to create mulitple instances of the script, i noticed it stopped working because the ID name is not specifically ajax-contact-form. take a look at the code:
<form id="ajax-contact-form" action="">
<input type="text" name="name" value="Name *" title="Name *" />
<input type="text" name="email" value="Email " title="Email *" />
<input type="text" name="email" value="Email *" title="Email *" />
<textarea name="message" id="message" title="Message *">Message *</textarea>
<div class="clear"></div>
<input type="reset" class="btn btn_clear" value="Clear form" />
<input type="submit" class="btn btn_blue btn_send" value="Send message!" />
<div class="clear"></div>
</form>
and heres the JS
$("#ajax-contact-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contact_form/contact_process.php",
data: str,
success: function(msg) {
// Message Sent - Show the 'Thank You' message and hide the form
if(msg == 'OK') {
result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
$("#fields").hide();
} else {
result = msg;
}
$('#note').html(result);
}
});
return false;
});
Now if i were to switch that ID name on both and MATCH them, the script stops working- Theoretically it should work- not sure whats wrong with this.
as always any help is appreciated, thanks!
If you are trying to access two elements with the same id with jQuery - nothing gonna happen. Each element must have a unique identifier, otherwise you should use classes.
However, can you give us the markup of another form?
This is really strange, when I run this code i get 2 span.
$('#_login input').fadeOut('fast', function(){
$('#_login').append('<span id="bob_login_err" style="color:orange;font-size:10px;">Could not log in</span>').fadeIn('fast');});
that's beacause you have 2 input inside #_login i guesse login and password:
try this:
HTML:
<div id="_login">
<div class="inputHolder"><!--Put The 2 input inside a div-->
<input type="text" value="" name="login"/>
<input type="text" value="" name="password"/>
</div>
</div>
JS:
$('#_login .inputHolder').fadeOut('fast', function(){
$('#_login').append('<span id="bob_login_err" style="color:orange;font-size:10px;">not could not log in</span>').fadeIn('fast');
});