'When the button is clicked, the sendContact function is not executed

<script>

// Group all fields into an object

var fields={};

// Linking all the fields to our fields object

 document.addEventListener("DOMContentLoaded", function(){
 fields.name = document.getElementById('name');
 fields.fame = document.getElementById('fame');
 fields.password = document.getElementById('password');
 fields.email = document.getElementById('email');
})

// Checking that the field is not empty 

function isNotEmpty(value) {
 if (value == null || typeof value == 'undefined' ) return false;
 return (value.length > 0);
}

// Checking that the field value is a number

function isNumber(num) {
 return (num.length > 0) && !isNaN(num);
}

// Check if a string is an email

function isEmail(email) {
 let regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
 return regex.test(String(email).toLowerCase());
}

// Check that the password is valid

function isPasswordValid(password) {
 if (password.length > 5) {
 return true;
 }
 else
    alert('Пароль должен быть больш пяти символов')
}

// Field validation function

function fieldValidation(field, validationFunction) {
 if (field == null) return false;
 let isFieldValid = validationFunction(field.value)
 if (!isFieldValid) {
 field.className = 'placeholderRed';
 } else {
 field.className = '';
 }

 return isFieldValid;
}
validationFunction(field.value)
if(!isFieldValid){
    fiwld.className='placeholderRed';
}else{
    field.className="";
}

// isValid function - combine all the checks

function isValid() {
 var valid = true;
 valid &= fieldValidation(fields.name, isNotEmpty);
 valid &= fieldValidation(fields.fame, isNotEmpty);
 valid &= fieldValidation(fields.email, isEmail);
 valid &= fieldValidation(fields.password, isPasswordValid);
 return valid;
}

// User class constructor

class User {
 constructor(name, fame, email) {
 this.name = name;
 this.fame = fame;
 this.email = email;
 }
}

// Sending the contact form data with JavaScript

 function sendContact(){
    if(isValid()){
        let usr=new User(name.value,fame.value,email.value);
        alert('${usr.name}Спасибо за регистрацию')
    }else{
        alert("Ошибка")
    }
 }


</script>

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
body{
    background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0.6)),url(1.jpg);
    height:100vh ;
    background-size:cover ;
    background-position: center;
}
.login-page{
    width:360 px ;
    padding: 10% 0 0;
    margin: auto;
}
.form{
    position: relative;
    z-index: 1;
    background: #ffffff;
    max-width: 360px;
    margin: -90px auto 100px;
    padding: 45px;
    text-align: center;
}
.form input{
    font-family: "Roboto",sans-serif;
    outline: 1;
    background:#f2f2f2 ;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
}
.btn{
    font-family: "Roboto",sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #4CAF50;
    width: 100%;
    border: 0;
    padding: 15px;
    color:#FFFFFF ;
    font-size:14px ;
    cursor: pointer;
}
h1{
    font-family: "Lato", sans-serif;
    color:#FFFFFF ;
    text-align: center;
    margin: 20px 0 0 0;
}

<html>
<head>
    <title>Вход и Регистрация</title>
    <link rel="stylesheet" href="style.css">
    <h1>Регистрация</h1>
</head>
<body>
    <div class="login-page">
        <div class="form">
            <form onsubmit="return false">
                <input type="text"  id="name" placeholder="Имя"  />
                <input type="text"     id="fame"    placeholder="Фамилия" />
                <input type="password"  id="password" placeholder="Придумайте пароль" />
                <input type="text"  id="email"  placeholder="[email protected]" />
                <button  class="btn" onclick="sendContact();">Создать</button>
            </form>
                </div>
               </div>
             </body>
</html>

Sources

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

Source: Stack Overflow

Solution	Source

'When the button is clicked, the sendContact function is not executed

Sources

Related Questions