Results 1 to 2 of 2

Thread: Simple form validation problem

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    1

    Default Simple form validation problem

    Hello,

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

    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: 'Powrt',
    					},
    					{
    						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:

    Code:
    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 = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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

  2. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335

    Default

    Hi,

    you can use this for change the border color of fields:-
    Code:
     setStyle('border solid 1 px green')
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •