CODEWITHSUNDEEP
javascriptphpjquery
user10795806
user10795806

Reputation:

validate input with js

this is my register.php code

<form id="register_form" onsubmit="return false" autocomplete="off" >

<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control" id="username" placeholder="enter username">
<small id="u_error" class="form-text text-muted"></small>
</div>


<button type="submit" name="user_register" class="btn btn-primary"><span class="fas fa-user"></span> Register</button>

this is my js 

$(document).ready(function(){
//     alert("hello friends");
$("register_form").on("submit",function() {
    var status = false ;
    var name = $("#username");

    if (name.val() == "" || name.length < 6 ) {
        name.addClass("border-danger");
        $("#u_error").html("<span class='text danger'> name more that 6 char</span>");
        status = false;
    }else {
        name.addClass("border-danger");
        $("#u_error").html("<span class='test danger'> please enter name</span>");
        status = true;
    }
})
 })

here i try username field less than 6 or empty through js i validate but its not working may i know why?

Upvotes: 0

Views: 130

Answers (4)

Vivzon Technologies
Vivzon Technologies

Reputation: 1

$(document).ready(function(){
  $('#frm').submit(function(){
    if(!$('#name').val()){
      alert('Please enter your name');
    }
    else if(!$('#age').val()){
      alert('Please enter your age');
    }
    else if(!$('#mobile').val()){
      alert('Please enter your mobile');
    }
    else if(!$('#email').val()){
      alert('Please enter your email');
    }
  });
});
<html>
    <head>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <form id="frm">
            <input type="text" name="name" id="name" placeholder="Name..."><br><br>
            <input type="number" name="age" id="age" placeholder="Age..."><br><br>
            <input type="number" name="mobile" id="mobile" placeholder="Mobile..."><br><br>
            <input type="email" name="email" id="email" placeholder="Email..."><br><br>
            <input type="submit" name="submit" id="submit">
        </form>
    </body>
</html>

Upvotes: 0

Eran Machiels
Eran Machiels

Reputation: 881

Nothing happens because you are submitting the form, causing a redirect to another page or to the same page in order to do things with the backend on the server.
In order to prevent the form from submitting, do the following:

$("register_form").on("submit",function(event) {
    event.preventDefault();
    //... rest of your code

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

Event.preventDefault()

Besides, you are now checking if the value of name is empty, or the count of elements with id username is less than 6. To check the length of the value of name, do the following:

name.val().length < 6

Upvotes: 2

Ashu
Ashu

Reputation: 1320

There are so many changes into you code.

1.html - add submit button with </form> 
2.js - your event is on '#register_form' instead of 'register_form'
3.js - To prevent on submit you have to return true or false..in you case return status; after if-else
4.js - use name.val().length instead of name.length

Upvotes: 3

Niklesh Raut
Niklesh Raut

Reputation: 34914

count length on value not on object, change name.length to name.val().length

if (name.val() == "" || name.val().length < 6 ) {

Instead I suggest change here

var name = $("#username").val();

and check like below, there is no need to check for empty, only name.length < 6 is enough

if (name.length < 6 ) {

Upvotes: 1

Related Questions