how to prevent an href to show another page till first page is filled completely

Question

i have a link in mobile jquery..

  <div data-role="page" id="main" data-title="Main Page">

Here there are two textboxes which must be filled by the user. Then here is a link..

  <a href="#sub" data-role="button" id="save" data-icon="star" data-theme="b" data-transition="flip">Show Employee Data</a>

"sub" is data-role="page" which displays the data of these 2 textboxes. I wrote in .js..

  $(document).delegate('#save', 'click', function(e) {
       if(document.getElementById('name').value=="")
       {  alert('Name Not Entered..');e.preventDefault();return false;  }
  });

Every thing runs good, Alert is also shown, but second page is also shown because of href having id="save". All i need is to show this second page only after validation of first page.. Am i doing something wrong ?? Please suggest..

--EDIT-- I saw in break mode in chrome that just after clicking href second page gets loaded and then it enters in code. I have to stop this loading of second page immediately.. Is there anything we can write in a href"$sub" ... > ??

Simon · Answer 1 · 2012-07-13T13:26:51.840

1

I think this should do it:

$(document).delegate('#save', 'click', function() {
  var valid = undefined;
  $(':text').each( function() {
    valid = valid === undefined || valid ? $(this).val().length > 0 ? false;
  });
  if(valid) {
    return true;
  } else {
    alert('validation failed.'); return false;
  }
});

Explanation for the validation:

valid is initially undefined
if valid is undefined or true, check if this input has a value, if not set valid to false
if valid is not undefined or true, keep it false because if one input has no value then validation fails

If you want to make sure that they type in for example more than 3 letters, make $(this).val().length > 2.

edited Jul 13 '12 at 13:26

answered Jul 13 '12 at 11:39

Simon

7,182
2
26
42

"show this second page only after validation of first page" - please tell us exactly what you want to validate against. – Simon Jul 13 '12 at 12:40
There are two text boxes on the first page and user should enter something in both of them, then only second page should show. That's it.. – Dev Jul 13 '12 at 13:00
And it's just "something", doesn't matter what. – Simon Jul 13 '12 at 13:17

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

Try return false;, instead of return;. That should prevent the default behavior of the link, or alternatively include the event in your function arguments [function(ev){...] and call ev.preventDefault();.

You might want to check out: event.preventDefault() vs. return false

Good luck!

Also, try using click() instead of delegate() and you're missing a parenthesis at the end:

$("#save").click(function(e) {
    if(document.getElementById('name').value=="")
    {  alert('Name Not Entered..');e.preventDefault();return false;  }
})

edited May 23 '17 at 12:27

Community

1
1

answered Jul 13 '12 at 11:47

ryuusenshi

1,976
13
15

I tried e.preventDefault(); but second page is loading immediately after click the link and afterwards it enteres the validation code. Is there anything we can write in – Dev Jul 13 '12 at 12:13
After taking another look, I see you have a syntax error in your javascript. You're missing a parenthesis at the end ). Put that there and everything should work fine. Also you don't need both (return false; and e.preventDefault()). One or the other is enough. Also, try using click() instead of delegate(). – ryuusenshi Jul 13 '12 at 12:36
but $(document).click(function(e) { }); runs by clicking anywhere on the page. Will it be right ? Code should run by clicking on associated button and here button is href.. – Dev Jul 13 '12 at 12:57
yeah sorry, oversight. I meant $("#save").click() – ryuusenshi Jul 13 '12 at 13:13

score 0 · Answer 3 · edited Jul 19 '12 at 05:59

0

You can try this way....instead of "a", you can have ID

$(function(){

  $("a").click(function(e){

      if($("#txtName").val().length === 0)
      {
        e.preventDefault();
        return false;
      }    
  });
});

edited Jul 19 '12 at 05:59

Botz3000

39,020
8
103
127

answered Jul 13 '12 at 12:10

urvashi patil-sachdev

1

score 0 · Accepted Answer · answered Jul 13 '12 at 13:28

I got my problem solved.. I wrote

  $(document).ready(function() 
  {
      $("#save").click(function(e)
      {
          if(document.getElementById('name').value=="")
          {  
             alert('Name Not Entered..');e.preventDefault();return false;  
          }
          if(document.getElementById('surname').value=="")
          {  
             alert('Surname Not Entered..');e.preventDefault();return false;  
          }
      });
  });

});

Now the second page is not showing just by clicking on href, but shows after validation of the first page. Thanks for help..

how to prevent an href to show another page till first page is filled completely

4 Answers4