Java form validation For my Website [duplicate]

Question

I have created an alert box which will output the details from the form I am now wondering how I start the Java validation part so that if the form is filled in correctly an alert box with the form details will show however if it is wrong instruct the user to fill in the invalid boxes.

HTML

 <form id="foo" onsubmit="formAlert(); return false;" method="POST">
    <p><label for="first_name">First Name<label><input type="text" id="first_name" value="" /></p>
    <p><label for="last_name">Last Name<label><input type="text" id="last_name" value="" /></p>
     <p><label for="Phone_num">Phone Number<label><input type="number" id="phone_num" value="" /></p>


    <p><input type="submit" value="click me" onclick=""/></p>
</form>

Java Script

 function formAlert() {
alert_string = '';
var userName = document.getElementById('first_name').value;
var userLastName = document.getElementById('last_name').value;
 var phoneno =  document.getElementById('phone_num').value;
if(userName === "" || userName === null){
  alert("Please enter name");
}
if(userLastName === "" || userLastName === null){
  alert("Please enter lastname");
}

else if(phoneno === "/^(?([0-9]{3}))?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;" || phoneno === null){ alert("Please enter Phone number"); }

else{
 alert_string += userName + " ";
 alert_string += userLastName;
 alert_string += phoneno;
 alert(alert_string);

} }

Some punctuation of the question would make reading easier. There are many questions on form validation already, what have you tried? — RobG
– RobG, Commented Mar 17, 2017 at 1:16
So add if statements to check if they are valid or use html5 validation. — epascarello
– epascarello, Commented Mar 17, 2017 at 1:17

Community · Accepted Answer · 2017-05-23 11:46:18Z

0

Here's a quick and simple solution. Add this to your javascript code. Hope it helps!

function validatePhone(inputtxt) {
 var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
 return phoneno.test(inputtxt)
 }

 function formAlert() {
  alert_string = '';
 var userName = document.getElementById('first_name').value;
 var userLastName = document.getElementById('last_name').value;
 var phoneno =  document.getElementById('phone_num').value;
 if(userName === "" || userName === null){
 alert("Please enter name");
 }
 if(userLastName === "" || userLastName === null){
 alert("Please enter lastname");
 }
else if(!validatePhone(phoneno)){ alert("Please enter 10 digits for phone  number"); }

else{
alert_string += userName + " ";
alert_string += userLastName + " ";
alert_string += phoneno;
alert(alert_string);
 } 
}

To check for email simple use required. Something like this:

<input type="email" name="email" required>

There are many ways to validate phone number. Here's a good example: Credit goes to: https://stackoverflow.com/a/18376246/4084160

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Mar 17, 2017 at 1:28

HenryDev

5,0136 gold badges31 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

James anderson Over a year ago

Thanks for the help it works well could you help me with the Phone number and email verification please, in an example such as the above solution you have done.

HenryDev Over a year ago

@Jamesanderson if you want to check for email simply use required. I'm updating my solution now

James anderson Over a year ago

For my website I have to use Java validation , but thanks for the help you are providing it has been highly useful.

James anderson Over a year ago

all done pal how would I go about verifying a number ?

HenryDev Over a year ago

There are so many ways to do a validation for phone number. I'm updating my solution right now. Hope it helps!

|

Luiz Paulo Evangelista · Accepted Answer · 2017-03-17 02:00:25Z

0

There is other way to do that. it is a good approach if you have many inputs

<html>

<style>
.required 
{
    border: 1px solid #F00;
    padding: 2px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="foo" onsubmit="formAlert(); return false;" method="POST">
        <p><label for="first_name">First Name<label><input                    type="text" id="first_name" value="" /></p>
        <p><label for="last_name">Last Name<label><input type="text"          id="last_name" value="" /></p>

        <p><input type="submit" value="click me" onclick=""/></p>
    </form>

    <div id="msgRequired" style="display: none;">
    <p>required Field!</p>
    </div>

<script>    

function formAlert() {
        alert_string = '';
        var cont = 0;
         $("#foo input").not(':hidden').each(function () {
        if ($(this).val() == "") {
            $(this).addClass("required");
            cont++;
        }
        else
        {
            $(this).removeClass("required");
        }
    });
        if(cont == 0)
        {

        alert_string = alert_string + document.getElementById('first_name').value;
        alert_string = alert_string + ' ';
        alert_string = alert_string + document.getElementById('last_name').value;

        alert(alert_string);
        $("#msgRequired").hide();
        }
        else
        {
        $("#msgRequired").show();
        }

       }
</script>   

</html>

answered Mar 17, 2017 at 2:00

Luiz Paulo Evangelista

714 bronze badges

2 Comments

James anderson Over a year ago

Thanks for the solution pal could you show me how to verify an email address or phone number.

Luiz Paulo Evangelista Over a year ago

the solution that @HenryDev Replied, is a good way to Validate.

Collectives™ on Stack Overflow

Java form validation For my Website [duplicate]

2 Answers 2

10 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

2 Comments

Linked

Related