Harish Sharma.net

  • Menu
  • HOME
  • BLOG
  • MY WORK
  • MY CLIENTS
  • CONTACT ME
  • PAY ME
 Home > Coding > JS > PHP > Signup form validation without using alert messaging

Signup form validation without using alert messaging

Harish Sharma September 19, 2018 Coding, JS, PHP No Comments

Form Validation

While working on a PHP web application, I have required a form validation system where I want to print the error of my form fields in their respective allocated <div>. There are the ton of examples available where you find the solution but all those examples were showing the error message using the alert() function of Javascript and I noticed a problem with alert() function that when you clicked an OK button of the alert the page gets load again.

But after wasting my time to search an appropriate example which suits on my requirement and project need, I decided to make my self. I will not guarantee that this is the easiest and correct solution to the problem but it worked for me.

and if you have any better idea to perform this job then you can paste your solution in the comment box below.

Let’s dirty our hands into the coding.

My final output:

Signup form validation in javascript with no alert function

In the above screenshot, my form shows an error when any value will be empty or incorrect.

For this example, I have used

  • HTML
  • Bootstrap
  • Javascript

index.php (HTML with Bootstrap)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html lang="en">
<head>
  <title>Add a Property | Owner Administrator</title>
  <link href="assets/admin-assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
   <form method="post" action="register" id="add_property">
         <div class="form-group">
      <label for="exampleInputEmail1">Property Name*</label>
      <input type="text" class="form-control" id="prop_name" name="prop_name" aria-describedby="emailHelp" placeholder="e.g -> Harish Sharma" onfocusout="validate_value(1)">
      <small  class="form-text text-danger font-weight-bold" id="sprop_name"></small>
    </div>
       <div class="form-group">
      <label for="exampleInputEmail1">Assigned Manager Name*</label>
      <input type="text" class="form-control" id="assign_manager" name="assign_manager" aria-describedby="emailHelp" placeholder="e.g -> Shri Kapil Dev Sharma" onfocusout="validate_value(2)">
      <small  class="form-text text-danger font-weight-bold" id="sassign_manager"></small>
    </div>  
<div class="form-group">
    <label for="exampleInputEmail1">Manager Contact*</label>
      <input type="text" class="form-control" id="manager_contact" name="manager_contact" aria-describedby="emailHelp" placeholder="e.g -> 97XXXXXXX0" onfocusout="validate_value(3)">
      <small  class="form-text text-danger font-weight-bold" id="smanager_contact"></small>
    </div>
<div class="form-group">
<label for="exampleInputEmail1">Zip Code*</label>
<input class="form-control" name="zip" id="zip_code" onfocusout="validate_value(4)"></input>
<small class="form-text text-danger font-weight-bold" id="szip_code"></small>
</div>
     <button class="btn btn-primary" onclick="return validate_value('submit')">Add Property</button>
 
   </form>
    </div>  
</body>
</html>

Explanation: The HTML form is the same as other normal forms. The important thing should be noticed that I have called validate_value() function in onfocusout attribute into the input field. This javascript function takes a parameter as an identifier and will be run whenever anyone will move the focus from the current input field to another.

I have also used the same function on “onclick” attribute of <button> tag. This function will be run when the button will be clicked.

Let’s move to our Javascript

validation.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
function validate_value(param){
    var propertyName = document.forms["add_property"]["prop_name"].value.trim();
    var assign_manager = document.forms["add_property"]["assign_manager"].value.trim();
    var manager_contact = document.forms["add_property"]["manager_contact"].value.trim();
    var zip_code = document.forms["add_property"]["zip_code"].value.trim()
    var property_span=  document.getElementById('sprop_name');
    var assign_manager_span = document.getElementById('sassign_manager');
    var manager_contact_span = document.getElementById('smanager_contact');
    var zip_span = document.getElementById('szip_code');
    var mobile_reg = /[2-9]{2}\d{8}/
 
if(param == 1){
        if(propertyName == ""){
            property_span.innerHTML = 'You can not leave this field blank';
            return false;
        }        
        if(propertyName.length <=2 || propertyName.length >30){
            property_span.innerHTML = 'Property name length must be between 3 to 30';
            return false;
        }
        else{
            property_span.innerHTML = '';
            return false;
            
        }
}  
if(param == 2){
        if(assign_manager == ""){
            assign_manager_span.innerHTML = 'You can not leave this field blank';
            return false;
        }        
        if(assign_manager.length <=2 || assign_manager.length >30){
            assign_manager_span.innerHTML = 'Manager name length must be between 3 to 30';
            return false;
        }
        else{
            assign_manager_span.innerHTML = '';
            return false;
        }
}
if(param == 3){
        if(manager_contact == ""){
            manager_contact_span.innerHTML = 'You can not leave this field blank';
            return false;
        }        
        if(!manager_contact.match(mobile_reg)){
            manager_contact_span.innerHTML = 'Mobile Number format did not match';
            return false;
        }
        else{
            manager_contact_span.innerHTML = '';
            return false;
        }
}
if(param == 4){
        if(zip_code == ""){
            zip_span.innerHTML = 'Zip code value must be filled.';
            return false;
        }    
        var zip_reg = /^[0-9]{6}$/
        if(!zip_code.match(zip_reg)){
            zip_span.innerHTML = 'Entered Zip code is not valid.';
            return false;
        }
        else{
            zip_span.innerHTML = '';
            return false;
        }
}
if(param == 'submit'){
    if(propertyName != "" &&  assign_manager !="" && manager_contact !="" && zip_code != ""){  
            
            if(property_span.innerHTML =="" && assign_manager_span.innerHTML =="" && manager_contact_span.innerHTML == "" && zip_span.innerHTML == ""){
                            document.getElementById("add_property").submit();
 
                            return true;
                }
            
    }
    else
    {
       return false;
    }
}

Explanation: 

Javascript has been lengthy. Is’nt. But believe me, it’s very easy to understand. In this Javascript, I have done only three things.

  1. Get the Id of an input field and the allocated <div> or <span> where we want to show the error.
  2. Write the if queries for all field and identify each field with the passing parameter.
  3. Finally, By using the identifier ‘submit’ we write the submit logic of our form.

Because I have 4 fields so I have used 4 if query and one another for submit.

Tweet
Pin It

Related Posts

what is heredoc?

PHP Heredoc (EOD)

PHP Interview Programs

PHP Interview Programs | Part 1

Ruby Programming Language?

What is Ruby?

About The Author

Harish

Hello Dear Friends! My name is Harish Sharma and a security clueless guy. Through this blog i always try to keep my readers update and share my knowledge to all. If you really like my post. Then please share it to your facebook walls and give the chance to other for boost the kowledge. I will always feel happy to server you all. Thanks

    ABOUT THE AUTHOR

    Hi! My name is Harish Sharma and I am a professional web developer and digital market adviser and associated with this domain since 2014. This blog especially for those programmer and designers who stuck some time when developing. I tried to figure out and mention all those problems here with their solution and example. Hope you will like my posts. Visit my Full profile Here: About Me

    About Harish Sharma.net

    Hi Readers! Thank you so much for visit this site. Hope fully you liked this online PHP platform. If you didn't found which you are looking for. Kindly write to me at contact@harishsharma.net. You response will greatly appreciated. Also you can contribute your content to this website.

    Contribute Here

    Latest PHP News

    Tweets by TwitterDev

Make a Connection

You can touch with me by using the social media platform as well. Use the below links and you will be land on my social links.

 

              

Harish Sharma.net Copyright © 2019.