How to validate a form for all browsers including mobile browsers

时间:2016-10-20 20:14:12

标签: javascript jquery html css

I have a website http://www.yaseennikah.com/MyRegister.php. I need to validate the form on the client side. I used javascript code, but it is not working in some mobile browsers. I saw a jquery code here http://jsfiddle.net/WF2J9/16/. But I don't know to add jquery ul. So can any one complete the code please.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>form validation</title>
</head>
<body>

<form action="page1.php" method="post" class="a">
    Name : <input type="text" class="text" name="name" id="name" /> <br/>
    Address : <input type="text" class="text" name="address" id="address /><br/>
    email : <input type="text" class="text" name="email" id="email" /> <br/>
      <button id="submit" name="submit">submit</button>
</form>

<script>
    $('#submit').on('click', function() {
    valid = true;   

    if (valid && $('#name').val() == '') {
        alert ("please enter your name");
        valid = false;
    }

    if (valid && $('#address').val() == '') {
        alert ("please enter your address");
         valid = false;
    }    

    return valid;
});
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

您可以使用官方CDN将jQuery添加到您的网页上。将其添加到您的网页的首页<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

您可以使用此代码

测试是否正确加载了jQuery
if($) {
  alert("jQuery loaded");
} else {
  alert("jQuery not loaded");
}

编辑:
这是我的validation script版本(现在应该正常工作),如果您不想要它,请不要忘记删除trim()功能。

编辑2:
如果你想在没有jQuery的情况下这样做,你可以使用html的自动表单验证example。但是在9及更早版本中不支持这一点。
或者您可以尝试this(从上面重写jQuery代码到纯js和第二种表单验证方式)。
也在服务器端验证表单!!!