Ok, I've got a bit of a complicated task (at least for me)... I need to rewrite the default errorPlacement output:
<label for="name" generated="true" class="error" style="display: inline;">This field is required.</label>
into something like this:
<span class="error-msg qTipTitle" title="This field is required.">
possible? if so, how?
it is possible i did the same you can de it with errorPlacement and errorClass.
try reading the documentation on:
jQuery site( .validate(options))
its in the options of the .validate().
so you need it like: $('#myform').validate(errorPlacement: function(error, element){ /* placement here */ }
My code:
$('#Vdform').validate({
// zegt waar de error moet staan!
errorPlacement: function(error, element) {
error.appendTo(element.parent());
},
// hilights de error met de goede classes er op!
highlight: function(elem){
$(elem).parent().parent().addClass('error');
$(elem).addClass('help-inline');
},
// un highlights de error as die gedaan is!
unhighlight: function(elem){
$(elem).parent().parent().removeClass('error');
$(elem).removeClass('help-inline');
},errorClass: "help-inline",
errorElement: "span",
focusCleanup : true
})
Related
I would appreciate some help in something I'm trying to do with Polymer.
I have an element:
<dom-module id="internal-content">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>
<style>
internal-menu{
width: 20%;
height: 100%;
}
internal-associates, internal-networks, internal-letter, internal-help{
width: 80%;
height: 100%;
}
</style>
<div class="horizontal center layout">
<internal-menu></internal-menu>
<internal-associates id="internal-associates" data="{{userData.associates}}"></internal-associates>
<internal-networks id="internal-networks" data="{{userData.socialNetworks}}" style="display: none"></internal-networks>
<internal-letter id="internal-letter" data="{{userData.farewellLetter}}" style="display: none"></internal-letter>
<internal-help id="internal-help" style="display: none"></internal-help>
</div>
<paper-toast-error id="errorInServer"
text="Ha habido un problema en servidor al acceder a sus datos. Por favor, vuelva a intentarlo. Si el error persiste póngase en contacto con nosotros
a través del email v.punzano#gmail.com">
</paper-toast-error>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'internal-content',
properties: {
userData: {
type: Object
}
},
ready: function(){
$.ajax({
type: "GET",
url: "/getUserData",
data: {firebaseID: document.querySelector('#firebaseLogin').user.uid},
error: function(xhr, ajaxOptions, thrownError){
document.querySelector('#errorInServer').openToast();
},
success: function(msg) {
this.userData = msg;
// return msg;
}
});
}
});
})();
What I want to do is render the elements internal-associates, internal-networks and internal-letter with the data retrieved in the ajax call, in order to use the dom-repeat templates inside this elements to render the arrays within the data.
The problem with the code I attach here is that the elements have been registered in the DOM before the data is retrieved.
I can attached or provide more information if needed.
Regards and thanks in advance.
There are several issues with your code:
Use iron-ajax instead of jquery: Whereas using external libraries is per se no issue, using iron-ajax can simplify your code a lot
As pointed out by #a1626 the this in your success handler is not the Polymer object you wish to use here
Your update code (this.userData = msg;) won't force Polymer to update the object. Use this.set('userData', msg); instead.
If you really have issues with your Subnodes hide them while you don't have any data. See https://www.polymer-project.org/1.0/docs/devguide/templates#dom-if
In order to show error messages from the server the following code is used :
var onFail = function(result) {
Ember.Logger.debug("ERROR CustomersCreateController");
var json = result.responseJSON;
Ember.Logger.debug(json['errors']);
self.set("errors", json['errors']);
};
model.save().then(onSuccess, onFail);
But when I have this response from the server :
{"errors":[{"email":"O campo [email] precisa ser informado"}]};
An error is raised when I try to set("errors") ... any toughts ?
BTW I'm sending an 422 error from the server.
EDIT(1)
I saw this post that skips the default errors feature, is this the only hope ? :)
EDIT(2)
Adapt the solution from EDIT(1) to use this, but Ember should have something easier !!!
var onFail = function(result) {
Ember.Logger.debug("ERROR CustomersCreateController");
var json = result.responseJSON;
self.set( "requestMessages", {});
result.responseJSON["errors"].forEach(function(error_obj) {
Ember.Logger.debug(error_obj.field + '='+ error_obj.message );
self.set('requestMessages.' +error_obj.field, error_obj.message);
});
};
at the templates
<div {{bind-attr class=":form-group requestMessages.name:has-error"}} >
<label for="name" class="col-sm-2 control-label">Nome</label>
<div class="col-sm-10">
{{input type="text" class="form-control" value=name}} {{#if
requestMessages.name}} <span class="help-block">{{requestMessages.name}}</span>
{{/if}}
</div>
</div>
I believe the response format should be:
{"errors":{"email":["O campo [email] precisa ser informado"]}}
Basically i have a value from a database ($learner->idnumber)
I then have a form which posts using submithandler to process.php (this edits database)
Now this is the bit im stuck on, im trying to get the php db value $learner->idnumber to update without page refresh once the form has been processed.
I have found:
$("#pinnumber").load("profile.php #pinnumber");
but im not quite sure on how to implement this.
This is my code:
<a id="pinlink">edit</a>
<div id="results"><div>
<div id="pinnumber">
'.$learner->idnumber.'
<div>
<div id="pincontent" style="display:none;">
<form name="myform" id="myform" method="POST">
<input type="text" name="idnumber" id="idnumber" size="20" value=""/>
<input type="submit" name="submit" value="Update">
</form>
<div>
$(document).ready(function(){
$("#pinlink").click(function () {
$("#pincontent").show();
});
$("#myform").validate({
debug: false,
rules: {
idnumber: "required",
},
messages: {
idnumber: "Please enter your PIN",
},
submitHandler: function(form) {
$("#pincontent").hide();
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
Any help would be greatly appreciated.
I included:
print "".$_POST['idnumber']."";
in process.php before the save to db code.
this then printed into:
<div id="results"><div>
when form was submitted.
I am combing the jQuery validation plug-in with the jQuery Form Plugin to submit the form via AJAX.
This works perfectly in Firefox & Chrome, but (as usual) Internet Explorer is being a pain. For reasons that are alluding me, IE is ignoring the ajaxSubmit, as a result it submits the form in the normal fashion.
I've followed the validation plug-in's documentation when constructing my code:
JS:
<script src="/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var validator = $("#form_notify").validate({
messages: {
email: {
required: 'Please insert your email address. Without your email address we will not be able to contact you!',
email:'Please enter a <b>valid</b> email address. Without a valid email address we will not be able to contact you!'
}
},
errorLabelContainer: "#error",
success: "valid",
submitHandler: function(form) {$(form).ajaxSubmit();}
});
$('#email').blur(function() {
if (validator.numberOfInvalids() > 0) {
$("#label").addClass("label_error");
return false;
}
else {$("#label").removeClass("label_error");}
});
$('#form_notify').submit(function() {
if (validator.numberOfInvalids() == 0) {
$(this).fadeOut('fast', function() {$('#thank-you').fadeIn();});
return true;
}
return false;
});
});
</script>
Form HTML:
<form id="form_notify" class="cmxform" name="form_notify" action="optin.pl" method="get">
<fieldset>
<div class="input">
<label id="label" for="email">Email Address:</label>
<input type="text" id="email" name="email" value="" title="email address" class="{required:true, email:true}"/>
<div class="clearfix"></div>
</div>
<input type="hidden" name="key" value="sub-745-9.224;1.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0;;subscribe-224.htm">
<input type="hidden" name="followup" value="19">
<input type="submit" name="submit" id="submit-button" value="Notify Me">
<div id="error"></div>
</fieldset>
</form>
I can't understand what is causing IE to act differently, any assistance would be greatly appreciated.
I can provide more information if needed.
Thanks in advance!
Try the following:
$('#form_notify').submit(function(e) {
e.preventDefault();
if (validator.numberOfInvalids() == 0) {
$(this).fadeOut('fast', function() {$('#thank-you').fadeIn();});
return true;
}
return false;
});
can we use google AJAX Language API with EXTjs?????
i have tried example for translitration i have one html file
and typemarathi.js
google.load("elements", "1", { packages: "transliteration" });
function onLoad() {
var options = {
sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage: [google.elements.transliteration.LanguageCode.MARATHI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control = new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the editable DIV with id
// 'transliterateDiv'.
control.makeTransliteratable([myname]);
}
google.setOnLoadCallback(onLoad);
it works fine.
but if i write the textfield in extjs
Ext.onReady(function(){
var form1=new Ext.FormPanel({
renderTo:document.body,
frame:true,
title:'My First Form',
widyh:250,
items:[{ xtype:'textfield', fieldLabel:'First name', name:'firstname'}]
});
});
and try to pass firstname (name attribute to control.makeTransliteratable([firstname])) then it does not work... it says invalid id error
but if i pass->(html textfiled name to it) control.makeTransliteratable([myname]) it works fine
(i want to type and display multiple nonEnglish languages data
programatically frontend i used EXTjs is there any another way to do so if yes the suggest me. pls..
Yes you can.
Besides someone should clean his code, thats hurrible.
Yes, you can. But you should know that ExtJs automatically generates identifiers for html elements:
html:
<div class="x-form-item x-form-label-left x-box-item" id="ext-gen27" style="left: 0px; top: 0px;">
<label style="width: 55px;" class="x-form-item-label" id="ext-gen28">Send To:</label>
<div style="padding-left: 60px; width: 668px;" class="x-form-element" id="ext-gen26">
<div class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" id="ext-gen24" style="width: 668px;">
<input type="text" name="to" id="ext-comp-1002" autocomplete="off" size="24" class=" x-form-text x-form-field x-form-focus" style="width: 651px;">
</div>
</div>
</div>
js:
....
items: [{
xtype: 'combo',
store: ['test#example.com', 'someone-else#example.com' ],
plugins: [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
fieldLabel: 'Send To',
name: 'to'
}]
As I understand you need to translate the label. In order to do this you should get the id of the label. To do this you can use TextField's label property (myField.label.id). If you want to translate a lot of elements then probably it'll be better for you to use something like this:
var control = new google.elements.transliteration.TransliterationControl(options);
var labelIds = [];
Ext.each(Ext.select('label'), function(item){
labelIds.push(item.id);
});
control.makeTransliteratable(labelIds);
But be aware that you should call this only after rendering all elements. Also you can write a some plugin that will inject this functionality into 'render' method. Writing a plugin is a better but a bit more harder way.