Solved

form submission verification on jquery mobile

Posted on 2013-01-25
14
393 Views
Last Modified: 2013-01-28
I have a mobile jquery form. ON submission I check for verification and return false.
It's not stopping the form and I think it has to do with jquery mobile.
How am I supposed to get around it?

<form action="<%=MM_editAction%>" method="post" name="FrontPage_Form1" id="FrontPage_Form1" data-ajax="false" onSubmit="return FrontPage_Form1_Validator(this)">
<input type="submit" name="button" id="button" value="Submit" class="btnplaceOrder" /></form>

Open in new window

Verification looks like this:
  if (theForm.ccf_FirstName.value == "")  {
    alert("Please enter a value for the \"First Name\" field.");
		  $("#accordion").accordion( "option", "active", 1 );

    theForm.ccf_FirstName.focus();
    return (false);
  }
  

Open in new window

0
Comment
Question by:rivkamak
  • 7
  • 5
  • 2
14 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38821444
Perhaps post the HTML for the field and include the function statement
0
 
LVL 23

Accepted Solution

by:
Roopesh Reddy earned 500 total points
ID: 38821613
Hi,

Sample for you -

 <form>
        <input type="text" name="txt" id="txt" />
        <input type="submit" value="Submit" onclick="return Validate();" />
    </form>
    <script type="text/javascript">
        function Validate() {
            if (document.getElementById("txt").value == "") {
                //Your logic to display custom message
                document.getElementById("txt").focus();
                return false;
            }
        }
    </script>

Open in new window


Hope it helps u...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38821642
I strongly recommend never to use onclick of submit buttons.
The problem lies elsewhere
0
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38821894
Hi,

@mplungjan -
Yeah! I just created a sampe for the author to test. Anyway thanks for highlighting it!!!

@Author

Can you show the complete code to find the culprit.

Moreover, you are using "theForm.ccf_FirstName" , but the form ID is FrontPage_Form1 according to your form tag!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38821951
That is because the validation passes the form as theForm

function FrontPage_Form1_Validator(theForm) {
.
.
.
0
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38822103
Hi,

In that case, it's working fine for me -

    <form action="sample.htm" onsubmit="return Validate(this);">
        <input type="text" name="txt" id="txt" />
        <input type="submit" value="Submit"/>
    </form>
    <script type="text/javascript">
        function Validate(theForm) {
            if (theForm.txt.value == "") {
                //Your logic to display custom message
                document.getElementById("txt").focus();
                return false;
            }
        }
    </script>

Open in new window


Hope it helps u...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38822117
Why would you mix DOM and form access. You already have the field.  Also return true if ok.

       function Validate(theForm) {
            if (theForm.txt.value == "") {
                //Your logic to display custom message
               theForm.txt.focus();
               return false;
            }
            return true;
        }

There is obviously something else wrong with the page - no need to post similar code to what is already used...
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38822147
@mplungjan

Aaaah yeah! I didn't noticied it.

@Author
 You need to respond to fix this issue!!!
0
 

Author Comment

by:rivkamak
ID: 38825629
That script you gave didn't work either.
Is there any connection with the fact that I am using ajax mobile that isn't making that mobile form work?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38826005
Possibly. Hard to tell with the snippet you sent.

I suggest you debug it

you can use Web Inspector on iPhone for example
0
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38826828
Hi,

Are you using any third party plugins? Moreover, try creating a simple page and do some validation and check whether it works.

That way you can narrow down the issue easily!

Hope it helps u...
0
 

Author Comment

by:rivkamak
ID: 38828138
I made it a simple form with a simple function

  function Validate() {
                          console.log("function running");
                  return false;
        }

the console is logged , but it  doesn't return false. the form still submits.
my button looks like this:

<input type="submit" name="button" id="button" value="Submit" class="btnplaceOrder" onclick="Validate();"/>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38828339
you need to
Onclick="return Validate()"

But better to do that in onsubmit of the form tag
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38828995
hmm
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now