Java form validation For my Website

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*](http://stackoverflow.com/search?q=[javascript]+form+validation), what have you tried? — RobG, Mar 17 '17 at 01:16
So add if statements to check if they are valid or use html5 validation. — epascarello, Mar 17 '17 at 01:17

score 0 · Accepted Answer · edited May 23 '17 at 11:46

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 '17 at 11:46

Community

1
1

answered Mar 17 '17 at 01:28

HenryDev

4,685
5
27
64

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. – James anderson Mar 17 '17 at 01:47
@Jamesanderson if you want to check for email simply use required. I'm updating my solution now – HenryDev Mar 17 '17 at 01:49
For my website I have to use Java validation , but thanks for the help you are providing it has been highly useful. – James anderson Mar 17 '17 at 01:52
all done pal how would I go about verifying a number ? – James anderson Mar 17 '17 at 01:57
There are so many ways to do a validation for phone number. I'm updating my solution right now. Hope it helps! – HenryDev Mar 17 '17 at 01:59
Thanks for everything just the help I need wish I could give two thumbs up. – James anderson Mar 17 '17 at 02:10
bro I tried to do the phone number validation but I think i did it wrong just updated my code i think i put the validation in the wrong place – James anderson Mar 17 '17 at 02:27
ignore the previous comment lol its working now thank you, so if i do the same for the email it should work ? – James anderson Mar 17 '17 at 02:47
Yes you can use Regex for email too. Here are some examples. http://stackoverflow.com/questions/46155/validate-email-address-in-javascript – HenryDev Mar 17 '17 at 02:51
it worked brilliantly thank you for the help I have been trying to find a solution for weeks. – James anderson Mar 17 '17 at 03:04

score 0 · Answer 2 · answered Mar 17 '17 at 02:00

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>

Thanks for the solution pal could you show me how to verify an email address or phone number. — James anderson, Mar 17 '17 at 02:02
the solution that @HenryDev Replied, is a good way to Validate. — Luiz Paulo Evangelista, Mar 17 '17 at 02:10

Java form validation For my Website

2 Answers2