如何根据javascript中的开放输入验证文本框

时间:2014-03-25 05:56:53

标签: javascript php jquery html mysql

我正在构建我的网站,我在那里提供用户构建custom URL的选项。我在我的数据库mysql验证此自定义网址。如果自定义网址已经存在,那么必须更改自定义网址。如果用户不想要自定义网址,则不会选择该单选按钮。

我的问题是我的代码是验证文本框,即使那些他们没有选择customurl的选项,因此表单没有提交。

这是我的代码:

    <html>
    <body>
     <form action="insertdata.php" id="contact-form1" class="mar_l10" method="post">
     <p><input type="radio" name="cust1" value="2" onclick="hide();" class="display_inline">Dont want</p>
     <p><input type="radio" name="cust2" value="3" onclick="show();" class="display_inline">Custom URL need</p>
     <p id="showlabel" style="display: none;" onblur="test(this);">Custom URL</p>
    <input type="text"  name="url" id="url" style="display: none;" onblur="test(this);" class="display_inline" maxlength="20"/>
<div id="user_status"></div>
     <input type="submit" id="continue_details" value="Continue" title="Continue" class="submit_btn" >   
     </form>



     <script type="text/javascript">
            function show()
            {
            document.getElementById('url').style.display = 'block'; 
            document.getElementById('hostname').style.display = 'block';
            document.getElementById('checkurl').style.display = 'block'; 
            document.getElementById('showlabel').style.display = 'block';
            }
             function hide() 
             { 
             document.getElementById('url').style.display = 'none'; 
                 document.getElementById('hostname').style.display = 'none';
             document.getElementById('checkurl').style.display = 'none'; 
             document.getElementById('showlabel').style.display = 'none';
             }



    var flag = true;
    $('#contact-form1').submit(function(e){
    e.preventDefault();

    if($('#user_status').val() == " "){
     document.getElementById('contact-form1').submit();
        //return true;
    }
    else
    {
    test();
    $('.user_status').show();

    }




    })



    function test()
    {   
        var username = document.getElementById('url').value;
        var url = "check_url.php?username="+username;

       if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function()
        {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {

                var result = xmlhttp.responseText;
                if(xmlhttp.responseText =='Custom URL is available')
                {
                    document.getElementById('user_status').innerHTML =result ;

                    document.getElementById('contact-form1').submit();

                }
                else
                {
                   document.getElementById('user_status').innerHTML =result ;
                }

            }
        }


        xmlhttp.open("GET",url,true);

        xmlhttp.send();

    }
     </script>



     </body>
     </html>

对于自定义网址选项,单击数据库验证也正常,表单也提交。但如果我选择不需要自定义网址选项,表单也会验证网址文本框。

请任何人帮助我。

谢谢。

2 个答案:

答案 0 :(得分:0)

您需要测试以确定在进行测试时是否检查了cust2。

if($('input[name=cust2]').is(':checked'))
{
  test();
}

您应该让您的单选按钮具有相同的名称,以使它们互斥。不过,这是您查询的辅助工具。

答案 1 :(得分:0)

在调用测试功能之前,您必须检查单选按钮,如下所示:

else if ($('form input[type=radio]:checked').val() == 3)