Issue with Java script / Jquery validation?

Question

I have one select box and one text box are there. I need to the validation like if both are selected I need alert like "Either select a name or pick the name", If I did not select both i need alert like "Please select a name or pick the name", If I select one of them I need alert like "Thank you for selecting the name". I did it by java script but I did not get the result. Can it be done by using java script / Jquery? Any suggestions

    <body>
pick name:
        <select id="ddlView">
            <option value="0">Select</option>
            <option value="1">test1</option>
            <option value="2">test2</option>
            <option value="3">test3</option>
        </select>  
</br>
select name:
<input type= "text" name="raju" id="raju"></input>
        <input type="button" onclick="Validate()" value="select" />

        <script type="text/javascript">
            function Validate()
            {
                 var name = document.getElementById("raju");
                 var e = document.getElementById("ddlView");
                var strUser = e.options[e.selectedIndex].value;

                var strUser1 = e.options[e.selectedIndex].text;
                if(strUser==0 && (name==null || name== ' '))
                {
                    alert("Please select a name or pick the name");
                }

               else if( (!(strUser==0)) &&(! (name==null || name== ' ')))
                {
                    alert("Either select a name or pick the name");
                }
          else
                {
                     alert("Thank you for selecting the name");
                }
            }
        </script>


    </body>

Dan-Nolan · Accepted Answer · 2014-04-09 14:49:08Z

1

Here is your same validation using JQuery as you also mentioned:

function Validate()
{
    var name = $("#raju").val();
    var selected_name = $('#ddlView :selected').val();

    if(selected_name == 0 && name == "")
    {
        alert("Please select a name or pick the name");
    }
    else if( !(selected_name == 0) && name != "")
    {
        alert("Either select a name or pick the name");
    }
    else
    {
        alert("Thank you for selecting the name");
    }
}

Fiddle

answered Apr 9, 2014 at 14:49

Dan-Nolan

6,6574 gold badges29 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Arthur Over a year ago

You realy don't need to use jQuery here... All you can do without, so why load jQuery library ??

Dan-Nolan Over a year ago

@Arthur OP asked for it

Arthur Over a year ago

Yes in case of javascript can't do it

Dan-Nolan Over a year ago

That's an odd thing to say. There's nothing JQuery can do that JavaScript can't... JQuery is Javascript.

Arthur Over a year ago

So... In case of javascript can't do it easily ;)

|

zozo · Accepted Answer · 2014-04-09 14:41:41Z

1

Your problem is that you get the input, not the value.

Replace var name = document.getElementById("raju"); with var name = document.getElementById("raju").value;

Also, you compare the name with null and blank space. You must compare it with empty string. (name == '')

answered Apr 9, 2014 at 14:41

zozo

8,64019 gold badges83 silver badges142 bronze badges

Comments

Arthur · Accepted Answer · 2014-04-09 14:49:02Z

1

When you saw on my Jsfiddle code, I don't use oonclick attribute but a event listener on javascript (realy better for your html)..

document.getElementById("myBtn").onclick= function ()

One second poitn you have forget tu retrieve .value of you name input (so already return [HTML DOM object] and not null or a value.

var name = document.getElementById("raju").value;

answered Apr 9, 2014 at 14:49

Arthur

5,1783 gold badges37 silver badges65 bronze badges

Comments

John · Accepted Answer · 2014-04-09 15:11:30Z

Since your post was in pure JavaScript, I've decided to answer accordingly. As mentioned, you shouldn't check an empty string for " " but rather '' or "". Furthermore, you shouldn't even need to do that, since you can simply check if (str) { // string exists }. For your name variable, you're referring to an HTML element and not it's string value. So, all in all (a few errors), nothing majorly wrong here.

I've abstracted this process a tiny bit to give you an idea of how to validate many similar fields without a whole lot of repetitive code.

Note: You should find a way to replace your inline event handlers with unobtrusive handlers. Example:

document.getElementById('someButton').onclick = Validate;

That being said, here's a few suggestions:

var emptyString = function(str) {
    if (str) {
        return false;
    }
    return true;
};

var emptySelect = function(sel) {
    if (parseInt(sel) !== 0) {
        return false;
    }
    return true;
};


function Validate() {
    var name = document.getElementById("raju").value;
    var e = document.getElementById("ddlView");
    var strUser = e.options[e.selectedIndex].value;

    switch (true) {
        case (!emptySelect(strUser) && !emptyString(name)):
            alert('Either select a name or pick a name.');
            break;
        case (emptySelect(strUser) && emptyString(name)):
            alert('Please select a name or pick a name.');
            break;
        default:
            // Possibly some default validation
            alert('Thanks for picking a name');
            break;
    }
}

Collectives™ on Stack Overflow

Issue with Java script / Jquery validation?

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related