'JavaScript Validation Form Person Company

Hello i have to make a validation form when i press Validate, it should come out in console true or false. I can use Jquery 2.1.

You are given an HTML document with a form and your task is to validate it in JavaScript.

The form is used to enter contact data, either of a person or a company. The radio buttons named "type" control this choice. Exactly one such button (of value "person" or "company") will be checked.

If the "person" option is checked, you should validate the following fields (and only these):

first_name and last_name should be non-empty. For example, "John" and " " (space) are valid, but "" is not. email should be non-empty and validated according to a simple scheme: It should contain exactly one @ character. Moreover, both parts (before and after the @) should consist of at least one and at most 64 characters comprising only letters, digits and/or dots (a−z, A−Z, 0−9, .). For example, "[email protected]" and ".@." are valid, but "@example.com" is not. If the "company" option is checked, you should validate the following fields (and only these):

company_name should be non-empty; phone should be non-empty and consist of digits, dashes (-) and spaces only. It should have at least six digits. For example, "234-567-890" is valid, but "12-3" is not. Write a function

function solution();

that, given a DOM tree representing an HTML document, returns a Boolean value indicating whether the form in this document is valid.

this is my code

function solution() {     
    var person = $("#type_person").is(":checked");
    var company = $("#type_company").is(":checked");
    var fName = $("#first_name").val();
    var lName = $("#last_name").val();
    var email = $("#email").val();
    var companyName = $("#company_name").val();
    var phone = $("#phone").val();
    var result = true;
    
    $("input").removeClass("validateFail");

    if (person) {       
      if (fName.match(/[a-zA-Z ]+/) == null){
        $("#first_name").addClass("validateFail");
        result = false;
      }
      
      if(lName.match(/[a-zA-Z ]+/) == null){
        $("#last_name").addClass("validateFail");
        result = false;
      }
      
      if(email.match(/^[a-zAZ.]{1,64}@[a-zA-Z.]{1,64}$/) == null ){
        $("#email").addClass("validateFail");
          result = false;
      }
          
    } else if (company) {
      if(companyName.match(/(.)+/) == null){
        $("#company_name").addClass("validateFail");
        result = false; 
      }
      
      if(phone.match(/^[\d]{3}-[\d]{3}-[\d]{4}$/) == null){
        $("#phone").addClass("validateFail");
        result = false;
      }
      
    } else {
       return false; // Possible when a DOM Element isn't found
    } 
  return result;
}
$("#validateMe").on("click", function(){
  if(solution() == true){
    console.log("EVERYTHING OK!");
  } else {
    console.log("Validation FAILED!");
  }
  
});

and html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js.js"></script>
<style>
input {
  float: left;
}

input[type=text],
input[type=button] {
  clear: left;
}

</style>
</head>
<body>
<form>
    PERSON: <input type="radio" id="type_person" name="type" value="person" /> <br> 
    COMPANY:<input type="radio" id="type_company" name="type" value="company" checked/> <br> 
    <input type="text" id="first_name" name="first_name" value="John" />
    <input type="text" id="last_name" name="last_name" value="Doe" />
    <input type="text" id="email" name="email" value="[email protected]" />
    <input type="text" id="company_name" name="company_name" value="ACME" />
    <input type="text" id="phone" name="phone" value="12-3" />
    <input type="button" value="Validate" id="validateMe" />
    </form>
    </body>

What should i change there to work? It actually don't do anything in console.

javascripthtmljquery


Solution 1:[1]

Take these 2 lines of code from the head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js.js"></script>

and put them inside the body after the closing of the form like this

<body>
    <form>
        PERSON: <input type="radio" id="type_person" name="type" value="person" /> <br> 
        COMPANY:<input type="radio" id="type_company" name="type" value="company" checked/> <br> 
        <input type="text" id="first_name" name="first_name" value="John" />
        <input type="text" id="last_name" name="last_name" value="Doe" />
        <input type="text" id="email" name="email" value="[email protected]" />
        <input type="text" id="company_name" name="company_name" value="ACME" />
        <input type="text" id="phone" name="phone" value="12-3" />
        <input type="button" value="Validate" id="validateMe" />
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="js.js"></script>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dr.ctrl

Related Questions