简体   繁体   English

Java脚本/ Jquery验证问题?

[英]Issue with Java script / Jquery validation?

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. 我是用Java脚本完成的,但没有得到结果。 Can it be done by using java script / Jquery? 可以使用Java脚本/ 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>

Your problem is that you get the input, not the value. 您的问题是您得到输入,而不是价值。

Replace var name = document.getElementById("raju"); 替换var name = document.getElementById(“ raju”); with var name = document.getElementById("raju").value; var name = document.getElementById(“ raju”)。value;

Also, you compare the name with null and blank space. 此外,您将名称与null和空格进行比较。 You must compare it with empty string. 您必须将其与空字符串进行比较。 (name == '') (名称=='')

When you saw on my Jsfiddle code , I don't use oonclick attribute but a event listener on javascript (realy better for your html).. 当您在我的Jsfiddle代码上看到时,我没有使用oonclick属性,而是在javascript上使用了事件监听器(对于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. 一秒钟后您忘记了获取名称输入的.value(因此已经返回[HTML DOM object]而不是null或值)。

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

Here is your same validation using JQuery as you also mentioned: 正如您提到的,这是使用JQuery的相同验证:

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 小提琴

Since your post was in pure JavaScript, I've decided to answer accordingly. 由于您的帖子使用的是纯JavaScript,因此我决定相应地回答。 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 } . 此外,你甚至不应该需要做 ,因为你可以简单的检查if (str) { // string exists } For your name variable, you're referring to an HTML element and not it's string value. 对于您的name变量,您指的是HTML元素,而不是string值。 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. 注意:您应该找到一种方法,用unobtrusive处理程序替换inline event 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;
    }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM