If you are using Internet Explorer, please remove blackberry.com from your compatibility view settings.

Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Developer
marc25v
Posts: 27
Registered: ‎07-24-2012
My Device: Blackberry Dev Alpha
My Carrier: Bell
Accepted Solution

Form Field Validation

Another question from me...

 

I have a form that is located in a screen that was pushed in.

 

The form looks like this:

 

<form onsubmit="return checkPass()">
<div data-bb-type="panel-header">Slogan</div>

			   <div id="slogan11" data-bb-type="label"></div>
			   <input id="myanswer" type="text" value="" required autofocus/>
			   <input id="theanswer" type="text" value="" hidden/>
		   		<input type="submit">
		   
</form>

My javascript is right on top of the form, like this:

 

<script>
function checkPass(){
                          var pass1 = document.getElementById('myanswer');
                          var pass2 = document.getElementById('theanswer');
                          var goodColor = "#224466";
                          var badColor = "#900000";
                          if(pass1.value == pass2.value){
                            myanswer.style.backgroundColor = goodColor;

							alert("Correct");
                            return true;
                          }else{
                            myanswer.style.backgroundColor = badColor;


                            return false;
                          }
                        }  
</script>

 

However, when testing it out on my Alpha dev device, when submitting the form, it simply returns me to my first index.htm.  It doesn't validate.

 

Can someone help me?

 

Thanks!

Please use plain text.
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha
My Carrier: o2 (de)

Re: Form Field Validation

Try to always return false. You never want to reload the page, right?
- - -
My approved apps @ App World
Please use plain text.
New Developer
marc25v
Posts: 27
Registered: ‎07-24-2012
My Device: Blackberry Dev Alpha
My Carrier: Bell

Re: Form Field Validation

Hey!

 

In tried changing the first "return true" to "return false"...  But same thing. The page gets back to my index.htm without any of my previously pushed screens. Any other ideas?  Or another method for validation.

 

Essentially all I want to do is the following:

 

I have a form field.  Users are to input a word.  If this word matches the word I intended them to write, it would alert them "correct" and perform a sql function to save the data.  Most of it I can do, however for the "validation" of the form, I can't figure it out.  Maybe I shouldn't be using a form per say, but just a field and button... But I have no clue how to proceed.

 

Thanks a lot!!!

Please use plain text.
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha
My Carrier: o2 (de)

Re: Form Field Validation

Hi, so this time I actually played around with your code and it works for me.

So we need to figure out why it won't work for you then...

 

Two questions to check:

  1. Can you verify with console.log() command if your checkPass() function even gets called?
  2. Do you get any errors in the Chrome Developer console (or BB10 remote debugger) when using that function?
- - -
My approved apps @ App World
Please use plain text.
New Developer
marc25v
Posts: 27
Registered: ‎07-24-2012
My Device: Blackberry Dev Alpha
My Carrier: Bell

Re: Form Field Validation

Hi.  Thanks once again.  I don't have access to my files until tonight, however I can answer the 2nd question. No errors appear in the dev console in chrome.

 

as to why it works for you and not for me... Did you insert this in body tags?  If so,

 this is not my case. My index file is built in the head and pushes using bb.pushscreen to a new screen. That screen has no html head or body... Just code (as well as the needed screen div tag).  

 

I don't know if that can help you out while I actually  get hold of my code in > 12 hours :/ 

Please use plain text.
New Developer
marc25v
Posts: 27
Registered: ‎07-24-2012
My Device: Blackberry Dev Alpha
My Carrier: Bell

Re: Form Field Validation

Hey.

 

Ok So I added the console.log command and ran the page.  To start, here is a snippet of my page:

<script>
console.log(function checkPass(){
                          var pass1 = document.getElementById('myanswer');
                          var pass2 = document.getElementById('theanswer');
                          var goodColor = "#224466";
                          var badColor = "#900000";
                          if(pass1.value == pass2.value){
                            myanswer.style.backgroundColor = goodColor;

							alert("Correct");
                            return false;
                          }else{
                            myanswer.style.backgroundColor = badColor;


                            return false;
                          }
                        }  );
</script>

<div data-bb-type="round-panel"> 
<form onsubmit="return checkPass()">

 

And here are the errors being logged. 

webworks.bb10 :: fired webworksready event! ripple.js:475
function checkPass(){ var pass1 = document.getElementById('myanswer'); var pass2 = document.getElementById('theanswer'); var goodColor = "#224466"; var badColor = "#900000"; if(pass1.value == pass2.value){ myanswer.style.backgroundColor = goodColor; alert("Correct"); return false; }else{ myanswer.style.backgroundColor = badColor; return false; } }
  1. Uncaught ReferenceError: checkPass is not defined index.htm:1
    1. onsubmitindex.htm:1
webworks.bb10 :: fired webworksready event! ripple.js:475
webworks.bb10 :: fired webworksready event! ripple.js:475

 

Just note that the log of the code appears upon initial page view.  The Uncaught reference error happens once I press submit on my form, and then the page is redirected to my index.htm page.

 

Thanks!  I wish I could give you points or something :smileywink:

Please use plain text.
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha
My Carrier: o2 (de)

Re: Form Field Validation

Hey Marc,

 

thats not exactly what I meant. I thought of something like this:

<script>
function checkPass(){
console.log('CHECKPASS() IS CALLED!');
                          var pass1 = document.getElementById('myanswer');
                          var pass2 = document.getElementById('theanswer');
                          var goodColor = "#224466";
                          var badColor = "#900000";
                          if(pass1.value == pass2.value){
                            myanswer.style.backgroundColor = goodColor;

							alert("Correct");
                            return false;
                          }else{
                            myanswer.style.backgroundColor = badColor;


                            return false;
                          }
                        }  );
</script>

 

But I'm pretty sure you can get your problem solved by either putting your script directly within your index.htm or at least by including an external .js file that get loaded in your index file.

 

And feel free to hit the "Like" button when you consider my replies helpful. :smileywink:

- - -
My approved apps @ App World
Please use plain text.
New Developer
marc25v
Posts: 27
Registered: ‎07-24-2012
My Device: Blackberry Dev Alpha
My Carrier: Bell

Re: Form Field Validation

One more question and I promise I will stop bothering you forever :smileyvery-happy:

 

I have three screens.  My Index, My Menu, and My Other Screen.

 

My menu contains a list that is generated from an array loaded from a SQL database upon DOMready provided in the index page.   When clicking on these items in this list, you are brought to page "other", where they can modify the title of the list item.  Once the title is done, they press submit, and it brings them back to the menu (with the list).... However this list does NOT refresh.  To refresh I have to press back into the index, and go back forward into my menu.

 

How could I make the list refresh without this extra step. 

 

ondomready: function(element, id) {
											if (id == 'play') {
											var myList = []
											myList = lib.query("slogan", {correct: "0"});
											
											var myList2 = []
											myList2 = lib.query("slogan", {correct: "1"});


[...]

 The above is in my index.htm page

 

My menu page only contains this <div id="play" data-bb-type="screen" data-bb-effect="fade">  with the list that gets populated.

 

And my other page contains the code that we were discussing in this thread.

 

 

Please use plain text.
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha
My Carrier: o2 (de)

Re: Form Field Validation

Show me the code where you have implement the jumping back to your menu (with the ID 'play'?), once the data has been validated.

Because the ondomready function is supposed to be executed...

- - -
My approved apps @ App World
Please use plain text.
New Developer
marc25v
Posts: 27
Registered: ‎07-24-2012
My Device: Blackberry Dev Alpha
My Carrier: Bell

Re: Form Field Validation

<script type="text/javascript">
function checkPass(){
                          var pass1 = document.getElementById('myanswer');
                          var pass2 = document.getElementById('theanswer');
							var slogid1 = document.getElementById('slogid11');

                          var goodColor = "#66E42B";
                          var badColor = "#FF5050";
                          if(pass1.value == pass2.value){
                            myanswer.style.backgroundColor = goodColor;
                            var lib = new localStorageDB("library", localStorage);
                            update = lib.insertOrUpdate("slogan", {slogid: slogid1.value}, {
						    correct: 1});
						    lib.commit();
							alert("Correct");
							bb.popScreen();
							return false;
                          }else{
                            myanswer.style.backgroundColor = badColor;


                            return false;
                          }
                        }  

</script>

 

Thanks!

Please use plain text.