PDA

View Full Version : Simple form validation problem



bakacza
17 Jul 2012, 1:46 AM
Hello,

I've written simple form and simple validation to it but I don't know how to add one more thing.
Code:



Ext.define('MyApp.view.Kontakt', {
extend: 'Ext.Container',
xtype: 'kontakt',
//? fullscreen: true,

requires: [
'Ext.form.FieldSet',
'Ext.field.Number',
'Ext.field.Email',
'Ext.field.Checkbox'
],


config: {
layout: 'vbox',
scrollable: true,
styleHtmlContent: true,
style: 'text-align: center; background-color:white;',

items:
[
{
xtype: 'toolbar',
docked: 'top',
title: 'Kontakt',
minHeight: '60px',
items: [
{
ui: 'back',
xtype: 'button',
id: 'backToFunkcjeButton', //taki sam id jak w view.GdzieJestem
text: 'Powrót',
},
{
minHeight: '60px',
right: '5px',
html: ['<img src="resources/images/Small.png"/ style="height: 100%; ">',].join(""),
},
],
},
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'imie',
id: 'imietextfield',
placeHolder: 'Imię'
},
]
},
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'nazwisko',
id: 'nazwiskotextfield',
placeHolder: 'Nazwisko'
},
]
},
{
xtype: 'fieldset',
items: [
{
xtype: 'numberfield',
name: 'telefon',
id: 'telefonnumberfield',
placeHolder: 'Telefon'
},
]
},
{
xtype: 'fieldset',
items: [
{
xtype: 'emailfield',
name: 'email',
id: 'emailemailfield',
placeHolder: 'Email'
},
]
},

{
xtype: 'panel',
layout: 'vbox',
items: [
{
xtype: 'panel',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'fieldset',
width: '40px',
height: '40px',
flex: 1,

items: [
{
xtype: 'checkboxfield',
name: 'zgoda',
id: 'zgodaCheckbox',
//checked: true,
},
]
},
{
flex: 1,
html: ['<p style="margin-left:20px;">Wyrażam zgodę na przetwarzanie powyższych danych osobowych...</p>'].join(""),
},
]
},
//BUTTON
{
xtype: 'button',
text: 'Wyslij',
id: 'wyslijButton',
//zmienic na ui
style: 'color: white; background: orange; margin: 20px;',
},
]
},
{
id: 'redAlertForm',
style: 'display:none; color:red; font-weight:bold;',
html: ['<p>Wypełnij poprawnie formularz!</p>'].join(""),
},
{
id: 'greenAlertForm',
style: 'display:none; color:green; font-weight:bold;',
html: ['<p>Formularz wypełniony poprawnie.</p>'].join(""),
},
{
id: 'przyjeto',
style: 'color:green; display:none; font-weight:bold;',
html: ['<p>Rozmowa przyjęta do realizacji.</p>'].join(""),
},
{
id: 'niePrzyjeto',
style: 'color:red; display:none; font-weight:bold;',
html: ['<p>Rozmowa przyjęta do realizacji.</p>'].join(""),
},

]
},
});





And controller to it:



Ext.define('MyApp.controller.KontaktController', {
extend: 'Ext.app.Controller',

config: {
refs: {

},
control: {
'#wyslijButton' : {
tap: 'onWyslijButtonTap'
}

}
},

//called when the Application is launched, remove if not needed
// launch: function() {
// Ext.Viewport.add(Ext.create('Proama.view.Main'));
// },

onWyslijButtonTap:function()
{
var imie = checkImie();
var nazwisko = checkNazwisko();
var telefon = checkTelefon();
var email = checkEmail();
var checkbox = checkCheckbox();

var redAlert = Ext.getCmp('redAlertForm');
var greenAlert = Ext.getCmp('greenAlertForm');

if (imie && nazwisko && telefon && email && checkbox)
{
redAlert.setStyle('display:none');
// WYSLIJ INFORMACJE DO SERWERA

$.ajax({
dataType: 'jsonp',
//jsonp: 'jsonp_callback',
url: 'http://192.168.1.15:8080/contact/newClient?firstName='+Ext.getCmp('imietextfield').getValue()+'&lastName='+Ext.getCmp('nazwiskotextfield').getValue()+'&telephoneNumber='+Ext.getCmp('telefonnumberfield').getValue()+'&email='+Ext.getCmp('emailemailfield').getValue()+'',
success: function (data) {
var stat = data.status;
console.log(stat);
if (stat=="1")
Ext.getCmp('przyjeto').setStyle('display:block');
else if (stat == "0")
Ext.getCmp('niePrzyjeto').setStyle('display:block');


// do stuff

},
});


greenAlert.setStyle('display:block');

//Ext.Viewport.setActiveItem(Ext.create('Proama.view.RozmowaZamowiona'));
}
else
{
greenAlert.setStyle('display:none');

redAlert.setStyle('display:block');
}

},
});


function checkImie() {
var imie = Ext.getCmp('imietextfield');
var regex = /^[A-Za-z]{2,25}$/;
if(!regex.test(imie.getValue()))
{
console.log("imie niepoprawne");
imie.setValue("");
return false;
}
return true;
}


function checkNazwisko() {
var nazwisko = Ext.getCmp('nazwiskotextfield');
var regex = /^[A-Za-z]{2,25}$/;
if(!regex.test(nazwisko.getValue()))
{
console.log("nazwisko niepoprawne");
nazwisko.setValue("");
return false;
}
return true;
}


function checkTelefon() {
var telefon = Ext.getCmp('telefonnumberfield').getValue();
var regex = /[0-9]{9,}/;

if (telefon == null)
{
console.log("telefon niepodany");
return false;
}

if (!regex.test(telefon))
{
console.log("telefon niepoprawny");
return false;
}
return true;
}


function checkEmail(){
var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var email = Ext.getCmp('emailemailfield');
if (!regex.test(email.getValue()))
{
console.log('email nieprawidlowy');
email.setValue("");
return false;
}
return true;
}


function checkCheckbox(){
var cb = Ext.getCmp('zgodaCheckbox').getChecked();
if (cb == true)
{
return true;
}
else if (cb == false)
{
console.log('checkbox odznaczony');
return false;
}
}





And finally, my question is: what do I have to do to change color of field's border?
Please help

sword-it
17 Jul 2012, 4:08 AM
Hi,

you can use this for change the border color of fields:-


setStyle('border solid 1 px green')