sasi kiran

1616646339

Javascript form validation and prototype

Why JavaScript Form Validation?
Form need validation to prevent our web forms by malicious users. If your form doesn’t have proper validation, that might be one of the main causes of security vulnerabilities. Improper validations expose your website or application attacks such as SQL injections, header injections, cross-site scripting.

SQL Injection may lead to corrupt your backend database.

Header Injection can be used to send email spam from your web server.

Cross-site scripting may allow an attacker to send any data to your site.

While creating a form, validation of form data is based on the data type you specify for each field and for each data type only a specific set of characters are allowed.

For each field, it is important that form developers have to choose the correct data type.

[Read: Javascript String Methods | Properties | Objects]

Form validation examples:
In the following example, we are going to validate the name and password. Name cannot be empty and the password length should not less than 8.

Form Validation
   <p> Name: <input type="text" size="30" name="Name" > </p><br>        

   <p> Password: <input type="password" size="30" name="Password"> </p><br>

   <p><input type="submit" value="send" name="Submit"> </p>          

[Read: Arrays in Javascript: Declaration | Properties | Array methods]

Retype password validation
In this example, we will check the first password and the second password is matched or not.

   Password:<input type="password" name="password1" /><br/>  

   Re-enter Password:<input type="password" name="password2"/><br/>  

   <p><input type="submit" value="send" name="Submit"> </p>          
[Read: Hapi file upload download]

Number validation:
Let’s validate the text field for numeric value only by using isNaN() function.

   Number: <input type="text" name="number">

       <span id="numloc"></span><br/>  

   <input type="submit" value="submit">  
Email validation: To validate email in javascript, there are many criteria that need to be followed to validate the email is such as, email should contain @ and. characters, there must be at least one character before and after @ character, there must be at least two characters after .(dot).
   Email: <input type="text" name="email"><br/>  

   <input type="submit" value="submit">  

Javascript Prototype:

when a function is created in javascript then javascript engine adds a prototype property to the function and this prototype property is an object called a prototype object, which has a constructor prototype by default. Constructor property points back to the function and we can access the function’s prototype property using the syntax functionName.prototype.

Eg:

function Person(first, last, age, email) {

this.firstName = first;

this.lastName = last;

this.age = age;

this.email = email@domain.com;

}

var playerOne = new Person(“MS”, “Dhoni”, 38, “dhoni@domain.com”);

var playerTwo = new Person(“Sachin”, “Tendulkar”, 46, “sachin.tendulkar@gmail.com”);

You can not add a new property to an existing object constructor like following.

Eg:

Person.nationality = “India”;

To add a new property to a constructor, you must add it to the constructor function like following.

Eg:

function Person(first, last, age, email) {

this.firstName = first;

this.lastName = last;

this.age = age;

this.email = email@domain.com;

this.nationality = “India”;

}

Prototype Inheritance:

All JavaScript objects inherit properties and methods from a prototype like date objects inherit from Date.prototype, Array objects inherit from Array.prototype and Person objects inherit from Person.prototype

Using the prototype Property

The JavaScript prototype property allows you to add new properties to object constructors as following.

Eg:

function Person(first, last, age, email) {

this.firstName = first;

this.lastName = last;

this.age = age;

this.email = email@domain.com;

}

Person.prototype.nationality = “India”;

The JavaScript prototype property also allows you to add new methods to objects constructors as following

Eg:

function Person(first, last, age, email) {

this.firstName = first;

this.lastName = last;

this.age = age;

this.email = email@domain.com;

}

Person.prototype.name = function() {

return this.firstName + " " + this.lastName;

};

[Read: Javascript: Closure with simple examples!]

If you’ve any doubts, please let us know through comment!!

Follow Us on Facebook | Twitter | LinkedIn.

Be it a software developer, programmer, coder, or a consultant, CronJ has it all. CronJ has been a trustworthy company for startups, small companies, and large enterprises. Hire the web of experienced ReactJS Development Services for your esteemed project today.

Let CronJ assist you…!

Thank you !!!

#reactjs #javascript

What is GEEK

Buddha Community

Javascript form validation and prototype

Yogi Gurjar

1600308055

Laravel 8 Form Validation Tutorial

Laravel 8 form validation example. In this tutorial, i will show you how to submit form with validation in laravel 8.

And you will learn how to store form data in laravel 8. Also validate form data before store to db.

How to Validate Form Data in Laravel 8

  1. Step 1 – Install Laravel 8 Application
  2. Step 2 – Configuring Database using Env File
  3. Step 3 – Create Model & Migration File For Form
  4. Step 4 – Create Routes
  5. Step 5 – Creating Controller
  6. Step 6 – Create Blade File For Form
  7. Step 7 – Start Development Server
  8. Step 8 – Run Laravel 8 Form Validation App On Browser

https://laratutorials.com/laravel-8-form-validation-example-tutorial/

#laravel 8 form validation #laravel 8 form validation tutorial #laravel 8 form validation - google search #how to validate form data in laravel 8 #form validation in laravel 8

Laravel 8 Form Validation Example

In this tutorial we will see laravel 8 form validation example, form validation in laravel is very common functionalities and it is use in each and every website to validate form field.

Here, We will use has function in session to check error message in laravel 8. using this example you can check simple form validation as well as you can create your own custom validation in laravel 8.

Laravel 8 Form Validation Example

https://websolutionstuff.com/post/laravel-8-form-validation-example


Read Also : Laravel 8 CRUD Operation Example

https://websolutionstuff.com/post/laravel-8-crud-operation-example

#laravel 8 form validation example #form validation #how to validate form in laravel 8 #form validation in laravel #laravel #laravel8

How to Create a Client-Side Form Validation using JavaScript

In this video, we will create a client-side form validation using JavaScript. I'll only use Vanilla JavaScript and no external 3rd party dependencies. The aim is to help beginners to do form validation and understand how the whole process works.

Timestamps:
00:00 Intro
00:26 HTML
03:33 CSS
05:35 Javascript

Source code: https://codepen.io/javascriptacademy-stash/pen/oNeNMNR


 HTML

Let's start with the HTML markup. We'll have a container div, that we'll use to position and style our form. Inside that, not surprisingly, we'll create a form, we also set an id for it, and set the action to / since we don't really want to submit this form.

We'll create four input fields, for the username, email, password, and password confirmation. For styling and control purposes we'll wrap these input tags into divs with the class input control. Each of these input controls will contain a label, an input, and a div with the class error. Every input should have an id and name attribute. The label's should have a matching for property with the corresponding input tag's name attribute. For the input type we will use text for the username and email, and use password for the password and the password confirmation. The div with the error class will hold the error messages for the specific input field. It will be empty for now, we will modify it from javascript.

Lastly, we have to add a button to "submit" our form. In this example we won't really submit the form just simulate it. For the submit button I'll use a button with a type of submit.

<div class="container">
        <form id="form" action="/">
            <h1>Registration</h1>
            <div class="input-control">
                <label for="username">Username</label>
                <input id="username" name="username" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="email">Email</label>
                <input id="email" name="email" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password">Password</label>
                <input id="password"name="password" type="password">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password2">Password again</label>
                <input id="password2"name="password2" type="password">
                <div class="error"></div>
            </div>
            <button type="submit">Sign Up</button>
        </form>
    </div>

That is the HTML markup that we need for our form. Let's style it a bit with CSS.

CSS

We'll give a simple clean spacious design for this tutorial. I'll set a linear gradient as the background and I'll use a custom google font, that you can install from here.

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

We'll give a fix width to our form, and center it with margins, also I'll give it a top margin to move it down a bit vertically. To have more space we apply 20px of padding. We'll set a fixed font size, a light background color and also set a border radius to have rounded corners.

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

For the form title, we'll use a dark text color, and center it horizontally using text-align: center. The submit button should stand out so we'll use a blue background color, and white text color. We also remove the browser default borders and give it a little border-radius. We'll give it a little spacing with paddings and margins, and make it full-width by applying 100% width.

#form h1 {
    color: #0f2027;
    text-align: center;
}

#form button {
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    color: white;
    background-color: rgb(41, 57, 194);
    border: none;
    border-radius: 4px;
}

To have the inputs stacked below each other we'll use flexbox. To do that we'll set display: flex; and flex-direction: column. For the inputs we'll set a grey border, with a little border-radius. We'll set the display property to block, and make them full-width, by applying width 100%. We'll also set a little padding, so it'll be more spacious. I'll also remove the outline when the input is in focus, by setting outline: 0.

.input-control {
    display: flex;
    flex-direction: column;
}

.input-control input {
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    display: block;
    font-size: 12px;
    padding: 10px;
    width: 100%;
}

.input-control input:focus {
    outline: 0;
}

We'll use two classes ("success" and "error") to give visual feedback to the user on whether the input's value is valid or not. We'll apply these classes from javascript to the input-control div which contains the specific input field. When the success class is present we will set a green border color, otherwise if error is present we'll use a red border color instead. For the error div we'll use a smaller font-size and a red color to show the error messages.

.input-control.success input {
    border-color: #09c372;
}

.input-control.error input {
    border-color: #ff3860;
}

.input-control .error {
    color: #ff3860;
    font-size: 9px;
    height: 13px;
}

Let's do the validation in javascript next!

Javascript

The first thing we have to do is to save references for the form, and the input fields. As we gave id for every input and the form we can easily to do by using getElementById.

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

To prevent the form for automatically submit we have to attach and event listener to our form's submit event. In this event handler function we have to call preventDefault() function to prevent the form from submitting automatically. Instead of submitting we'll call the validateInputs function, which will validate the inputs and if we want to we can submit the form in there after every check passes, but we won't do that in this tutorial. We'll create this validateInputs shortly.

form.addEventListener('submit', e => {
    e.preventDefault();

    validateInputs();
});

We'll also create two helper functions: setErrorsetSuccess. We'll use these helper functions to set the error or success states of the input controls. Let's start with the setError one. It receives two parameters: element, and message. The element will be the input element that is in the specific input-control. So first we have to get the input control parent div. We'll save it into the inputControl variable, and get the input control div by using the parent property of the input element. Next we have to gather the error div, and save it into a variable. We can do that by querying the input control with the error class.
Now we have to set the error div's innerText to be the message that we got in parameters, and remove the success class from the input control (if it exists) and add the error class.

const setError = (element, message) => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = message;
    inputControl.classList.add('error');
    inputControl.classList.remove('success')
}

The setSuccess method will be really similar. The first difference is that it won't receive a message as a parameter. We have to clear the error display by setting its innerText to an empty string. Lastly we have to reverse the class application. We'll add the success class to the inputControl and remove the error class (if present).

const setSuccess = element => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = '';
    inputControl.classList.add('success');
    inputControl.classList.remove('error');
};

We will create one last helper function to validate emails. This is an optional step, if you don't want to use regular expressions, feel free to just set the input type of the email field to email. The isValidEmail function will take a string as a parameter and use this weird looking regular expression to check whether it is a valid email or not. We'll use String.test() function to test the string against the regex. We'll also convert the email to a string and make it lowercase.

const isValidEmail = email => {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

Now we should create the validator validateInputs function. First we will get the value of all the input fields. We can do that by getting the value property's value of the input field references. We'll call the String.trim() function to remove the trailing empty spaces (if any) from the start and end of the values.
Then we can start validating inputs. We'll use if, else statements to do the validation. For the username we will check whether if it is empty or not, by comparing the value with an empty string. If it empty, we'll call the setError function and provide the username element to it, with our error message. Otherwise we'll call the setSuccess method with the username element. Now we have to do this for the other input fields, but the approach will be the same.

const validateInputs = () => {
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    if(usernameValue === '') {
        setError(username, 'Username is required');
    } else {
        setSuccess(username);
    }
};

For the email we'll check if it is provided or not, and set an error if it is empty. If it is not empty we'll check whether it is a valid email address, and if not we'll set an error, otherwise we set success for the field.

if(emailValue === '') {
        setError(email, 'Email is required');
    } else if (!isValidEmail(emailValue)) {
        setError(email, 'Provide a valid email address');
    } else {
        setSuccess(email);
    }
}

For the password we'll check whether it is empty or not, and if it is not empty we'll check if it is longer than 7 characters. If not, well set an error, otherwise we'll set it as success.

if(passwordValue === '') {
        setError(password, 'Password is required');
    } else if (passwordValue.length < 8 ) {
        setError(password, 'Password must be at least 8 character.')
    } else {
        setSuccess(password);
    }
}

For the password confirmation we'll check if it is empty, and we should also check if the password confirmation's value is equal to the password's value.

if(password2Value === '') {
        setError(password2, 'Please confirm your password');
    } else if (password2Value !== passwordValue) {
        setError(password2, "Passwords doesn't match");
    } else {
        setSuccess(password2);
    }
}

Now we have every input validated, if we wanted to we could submit our form now to a specific endpoint.

Good job now you have a working form validation Javascript. Please note that you always have to validate the form inputs on the server-side as client-side validation can be easily bypassed. There are way more advanced form validation methods and libraries that we use in modern web development, but this project is a really good way to start and learn the fundamentals.

#javascript

Madilyn  Kihn

Madilyn Kihn

1591242495

Prototypal Inheritance — The second pillar of Javascript

All you need to know about Prototypal Inheritance — The second pillar of Javascript
What we will learn here will help us understand Object-oriented programming(OOP).

#javascript #prototyping #prototype #prototype-chain #js

JavaScript Prototypes. It Doesn't Have to Be Complicated.

It’s hard to skip prototypes (or the prototype chain or prototypal inheritance) if you want to dive deeper into JS development (Not only pure JS, but also Node.js, Frameworks like Vue.js, React.js, Angular,…).

If you are like me a few years ago and get some serious headache each time you have to deal with prototypes in JavaScript, this will probably be THE article you were looking for to get your head wrapped around the principle of prototypes in JS.

From the  MDN documentation (don’t be scared, we’ll clarify everything below):

When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property (referred to as [[Prototype]]) which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.

Private [[Prototype]] property

Refer back to the below illustration whenever you feel the need, it might help you to wrap your head around this concept easier.

Prototype chain

So let’s start from the base. Every object in JavaScript has a private [[Prototype]] prototype, which holds a reference to another object (or null). This means, that our new object will have access to methods and properties of that referenced object.

#javascript #prototypes #prototypal inheritance #prototype chain