How to stop scrolling or moving on next tab if my javascript function returns false

Question

//HTML Code
<div id="navigation1">
<ul>
<li><a href="#"><input type="submit" value="Next" 
       onClick="return checkfhname()" /></a></li>
</ul>
</div>

My Javascript checkfhname() is returning false, at same time <li> tag navigating to next tab form, so I want to stop this navigation if Javascript returns false.

I have difficulty understanding your question. Tab navigating, next tab, stop navigation? What do you mean by those? — kontur, Dec 30 '11 at 12:48
i have 5 tabs, each tab having different form fields and at each tabs end i have next,previous button, i want validate fields of tabs1 when i press NEXT button, if tab1 fields are validated successfully then only i have to move tab2 otherwise it show ERROR and keep on tab1............. — user1122910, Dec 30 '11 at 12:58
@ThiefMaster So you can *really* make sure that it's something the user can click of course! — jprofitt, Dec 30 '11 at 12:58

score 6 · Accepted Answer · edited May 23 '17 at 10:34

Explanation

Hmm, your question is a bit... for the lack of a better word, "iffy". However, I understand what you want to do.

First of all, there is no need to put an input element inside the link when the link also responds to true/false. Second of all, you should NEVER put an input element inside a link.
It's just bad practice.

When you return false via Javascript to a link, the link will not navigate you further, just like the input element wont send you further when you return false from a submit.

This should suffice

<a href="#" onClick="return checkfhname()">Next</a>

If you'd rather want a button, just change it to a button, add a parameter for url, and use window.location = url if you want it to navigate

<script>
    function checkNavigate(url){
        //check some conditions, conditions = false/true
        if(typeof url == "undefined" || !conditions) 
            return false;

        window.location = url;
        return true;
    }
</script>
<button onClick="checkNavigate('url')">Next</button>

Solution

Here's a JSFiddle example.

HTML

<div id="navigation">
    <ul>
        <li>
            <a href="#link_clicked" onClick='return checkfhName();'>Link</a>
        </li>
    </ul>
</div>

Javascript

function checkfhName(){
    //check your conditions, conditions = false/true
    //for the purposes of this example: conditions = false
    checkConditions = false;
    if(checkConditions){
        return true;
    }
    return false;
}

Additional information; good to know

How to stop scrolling or moving on next tab if my javascript function returns false

1 Answers1

Explanation

Solution

Additional information; good to know