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, "john@example.com" 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="john@example.com" />
<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.