Formsy-react: A form input builder and validator for React JS

formsy-react    

A form input builder and validator for React.

Quick StartAPI1.x API

Background

christianalfoni wrote an article on forms and validation with React, Nailing that validation with React JS, the result of that was this library.

The main concept is that forms, inputs, and validation are done very differently across developers and projects. This React component aims to be that “sweet spot” between flexibility and reusability.

This project was originally located at christianalfoni/formsy-react if you're looking for old issues.

What You Can Do

  1. Build any kind of form element components. Not just traditional inputs, but anything you want, and get that validation for free
  2. Add validation rules and use them with simple syntax
  3. Use handlers for different states of your form. (onSubmit, onValid, etc.)
  4. Pass external errors to the form to invalidate elements (E.g. a response from a server)
  5. Dynamically add form elements to your form and they will register/unregister to the form

Install

yarn add formsy-react react react-dom and use with webpack, browserify, etc.

Formsy component packages

1.x to 2.x Upgrade Guide

The 2.0 release fixed a number of legacy decisions in the Formsy API, mostly a reliance on function props over value props passed down to wrapped components. However, the API changes are minor and listed below.

  • getErrorMessage() => errorMessage
  • getErrorMessages() => errorMessages
  • getValue() => value
  • hasValue() => hasValue
  • isFormDisabled(): => isFormDisabled
  • isFormSubmitted() => isFormSubmitted
  • isPristine() => isPristine
  • isRequired() => isRequired
  • isValid(): => isValid
  • showError() => showError
  • showRequired() => showRequired

Quick Start

1. Build a Formsy element

// MyInput.js
import { withFormsy } from 'formsy-react';
import React from 'react';

class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.changeValue = this.changeValue.bind(this);
  }

  changeValue(event) {
    // setValue() will set the value of the component, which in
    // turn will validate it and the rest of the form
    // Important: Don't skip this step. This pattern is required
    // for Formsy to work.
    this.props.setValue(event.currentTarget.value);
  }

  render() {
    // An error message is passed only if the component is invalid
    const errorMessage = this.props.errorMessage;

    return (
      <div>
        <input onChange={this.changeValue} type="text" value={this.props.value || ''} />
        <span>{errorMessage}</span>
      </div>
    );
  }
}

export default withFormsy(MyInput);

withFormsy is a Higher-Order Component that exposes additional props to MyInput. See the API documentation to view a complete list of the props.

2. Use your Formsy element

import Formsy from 'formsy-react';
import React from 'react';
import MyInput from './MyInput';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.disableButton = this.disableButton.bind(this);
    this.enableButton = this.enableButton.bind(this);
    this.state = { canSubmit: false };
  }

  disableButton() {
    this.setState({ canSubmit: false });
  }

  enableButton() {
    this.setState({ canSubmit: true });
  }

  submit(model) {
    fetch('http://example.com/', {
      method: 'post',
      body: JSON.stringify(model),
    });
  }

  render() {
    return (
      <Formsy onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
        <MyInput name="email" validations="isEmail" validationError="This is not a valid email" required />
        <button type="submit" disabled={!this.state.canSubmit}>
          Submit
        </button>
      </Formsy>
    );
  }
}

This code results in a form with a submit button that will run the submit method when the form is submitted with a valid email. The submit button is disabled as long as the input is empty (required) and the value is not an email (isEmail). On validation error it will show the message: "This is not a valid email".

3. More

See the API for more information.

Contribute

  • Fork repo
  • yarn
  • yarn lint runs lint checks
  • yarn test runs the tests
  • npm run deploy build and release formsy

Changelog

Check out our Changelog and releases

Author: Formsy
Source Code: https://github.com/formsy/formsy-react/ 
License: MIT license

#react #typescript #validators #form 

Formsy-react: A form input builder and validator for React JS
React Dev

React Dev

1642479163

Check out the Powerful Validation using Yup with Formik | React Forms

In this tutorial we will check out the powerful validation we can do by integrating Yup with Formik!

Formik is a free and open source, lightweight library for ReactJS or React Native and addresses three key pain points of form creation:

  1. How the form state is manipulated.
  2. How form validation and error messages are handled.
  3. How form submission is handled.

The Formik library was written by Jared Palmer out of his frustration when building React forms, seeking to standardize the input components and flow of form submission. The idea was to keep things organized and in one place, simplifying testing, refactoring, and reasoning about your forms.

Resources:

Starting Code: https://github.com/angle943/formik-material-ui 
Formik Website: https://jaredpalmer.com/formik/docs/overview 
Yup website: https://github.com/jquense/yup 
Password Regex: https://www.thepolyglotdeveloper.com/2015/05/use-regex-to-test-password-strength-in-javascript/ 

Finished Code: https://github.com/angle943/advanced-formik-validations-with-yup 

Subscribe: https://www.youtube.com/c/JustinKimJS/featured 

#react  #formik  #Yup #typescript  #form 

Check out the Powerful Validation using Yup with Formik  | React Forms
Monty  Boehm

Monty Boehm

1639197120

Find out: Angular & Electron desktop UI framework

Angular Desktop UI

 This is a collection for native desktop like user interface components in Angular, especially useful for Electron apps.

It starts with MacOS support, light and dark mode.

Goal

The goal of this library is to provide native looking and behaving Angular UI components like buttons, checkboxes, inputs, tables, etc to match the user interface of common operating systems. Since all native UI designs of browser engines (like <input>, <button>) look and behave differently in browsers engines compared to the actual operating system UI you have to manually
design those elements when you want to provide a native look and feel. Material design and alike is for websites and not desktop applications.

The most obvious use-case is for Electron apps. Although it also works in browsers directly, you get the most out of it when using Electron since it provides certain Electron features to make your life easier.

Features

  • Button, Inputs, Radiobox, Checkbox, Slider, Dropdown
  • Window decoration: Actionbar, sidebar, splitter. Linux Ubuntu with Closer/Minimize/Maximize buttons
  • Lists and tables with sorting, dynamic columns, context menu
  • Emoji chooser
  • Form handling
  • Custom icon abstraction (converting automatically into svg font) for your svg icons.
  • Simple dialog system (build-in alert, prompt, confirm)
  • Zoneless support for high-performance
  • App menu abstraction ("File, Edit, View" menus of desktop applications)

Angular versions:

With the new rendering engine Ivy this library will switch to Angular v9 Ivy support only.
It might work in the non-ivy renderer as well, but is not tested.

Documentation

The full interactive auto-generated documentation is available at angular-desktop-ui.marcj.dev.

Installation

Getting started documentation.

As example see marcj/angular-desktop-ui-example you can find an freshly installed Angular v9 with configured angular-desktop-ui. Take a look at the last commit.

Screens

MacOS Light

MacOS Dark

<dui-form #form>
    <dui-form-row label="Username">
        <dui-input [(ngModel)]="username"></dui-input>
    </dui-form-row>

    <dui-form-row label="Really?">
        <dui-checkbox [(ngModel)]="checkbox">Checkbox A</dui-checkbox>
    </dui-form-row>

    <dui-form-row label="Which one">
        <dui-radiobox [(ngModel)]="radioValue" value="a">Radio A</dui-radiobox><br/>
        <dui-radiobox [(ngModel)]="radioValue" value="b">Radio B</dui-radiobox>
        <p>
            Chosen: {{radioValue}}
        </p>
    </dui-form-row>

    <dui-form-row label="Another one">
        <dui-select [(ngModel)]="radioValue" placeholder="Please choose">
            <dui-option value="a">Option A</dui-option>
            <dui-option value="b">Option B</dui-option>
        </dui-select>
    </dui-form-row>

    <dui-form-row label="Empty">
        <dui-select style="width: 100px;" [(ngModel)]="selectBox1" placeholder="Please choose">
            <dui-option value="x">Option X</dui-option>
            <dui-option value="y">Option Y</dui-option>
        </dui-select>
    </dui-form-row>
    
    <diu-button [submitForm]="form">Send</diu-button>
</dui-form>

Download Details: 
Author: Marcj
Source Code: https://github.com/marcj/angular-desktop-ui 
#angular #electron

Find out: Angular & Electron desktop UI framework

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

How to Create a Client-Side Form Validation using JavaScript

Symfony 4 Beginners: Dynamically modify a form (AJAX)

Not even sure if this needs to be in the beginners series since i haven’t covered events and event listeners yet, but what the hell, for the people who actually needs something like this, there you have it

#symfony 4 #ajax #form

Symfony 4 Beginners: Dynamically modify a form (AJAX)

Symfony 4 : The layout's search form

As requested by Bastian E, here’s a video on how to create a global search form inside your layout file ‘base.html.twig’, this video covers how to reference your action controller from the twig file in symfony 4 without bundle, if you are using bundle i recommend you watch the previous video.

link : https://www.youtube.com/watch?v=fxK132iv4aE&t=288s

#symfony #layout #form

Symfony 4 : The layout's search form

Search form in the layout (Symfony Tutorial)

This is a video based on a request on Symfony, he wanted to know how to include a form in the base.html.twig file, in the example i include a search form in the navigation bar along with the form submission.

#symfony #form #layout

Search form in the layout (Symfony Tutorial)
Sister  O'Kon

Sister O'Kon

1625796689

HTML TUTORIAL - FORM - PART 2

Learn HTML TUTORIAL - FORM - PART 2

#html #form

HTML TUTORIAL - FORM - PART 2
Sister  O'Kon

Sister O'Kon

1625793045

HTML TUTORIAL - FORM - PART 1

Learn HTML TUTORIAL - FORM - PART 1

#html #form

HTML TUTORIAL - FORM - PART 1
code bucks

code bucks

1625206884

React Form Handling and Validation 📝 | The Easiest Way using React Hook Form

https://youtu.be/jCo8hGNGkk4

Hey Guys,

I’m sure you get a lot of issues😫 while handling and validating forms in a traditional way. Let me show you an easier way😉 to handle forms in reactJS.

In this video, I will show you the best way of handling and validating forms. we will use React-Hook-Form which is the best tool that provides various methods to handle and validate the form.
Using this tool we don’t have to manage more states and also we don’t have to face issues of re-rendering components.
This is the fastest way to handle forms in react without compromising the performance of our app.

Like, Sub🥂 & Share! ♥

#react #javascript #web-development #software-development #node #form

React Form Handling and Validation 📝 | The Easiest Way using React Hook Form
Flutter Campus

Flutter Campus

1625068942

Flutter - How to Validate Form TextField Values

In this example, we are going to show you the easiest way to validate TextFiled or TextFormField in Flutter App. Validation is very important to retrieve correct data from users. See the example below to validate email, full name, phone number, credit card number, URL, and many more.

https://www.fluttercampus.com/guide/91/how-to-validate-form-textfield-values-flutter/

#flutter #form

Flutter - How to Validate Form TextField Values
Ahebwe  Oscar

Ahebwe Oscar

1624074540

DRY Django forms with Python 3.6

django-crispy-forms

The best way to have Django DRY forms. Build programmatic reusable layouts out of components, having full control of the rendered HTML without writing HTML in templates. All this without breaking the standard way of doing things in Django, so it plays nice with any other form application.

django-crispy-forms supports Django 2.2, 3.1 and 3.2 with Python 3.6+.

View Documentation View Github

The application mainly provides:

  • A filter named |crispy that will render elegant div based forms. Think of it as the built-in methods: as_tableas_ul and as_p. You cannot tune up the output, but it is easy to start using it.
  • A tag named {% crispy %} that will render a form based on your configuration and specific layout setup. This gives you amazing power without much hassle, helping you save tons of time.

Django-crispy-forms supports several frontend frameworks, such as Twitter Bootstrap (versions 2, 3, and 4), Uni-form and Foundation. You can also easily adapt your custom company’s one, creating your own, see the docs for more information. You can easily switch among them using CRISPY_TEMPLATE_PACK setting variable.

#form #django #dry django forms with python 3.6 #dry django forms with python 3.6 #dry django

DRY Django forms with Python 3.6
anita maity

anita maity

1623522889

How to Create a Simple Login Form Using HTML and CSS

In this article, I am going to show you how to create a simple login form using HTML, CSS, and Bootstrap programming code. Earlier I designed different types of login forms like Neumorphism, Glassmorphism. This login form is very simple and beautifully designed.

Demo & Source code

#html #css #login #form #javascript

How to Create a Simple Login Form Using HTML and CSS
anita maity

anita maity

1623502147

Neumorphism Login Form UI Design using HTML & CSS

In this article, I will tell you how to easily create a Neumorphism login form using HTML and CSS programming code. Earlier I have shown the design of many types of login forms such as animated, pop-up, responsive, transparent, etc. But it is a modern and UI Design login form that everyone is currently liking. This type of form is basically designed by CSS code. It has two themes, the first is the dark theme, the second is the light theme. Here basically I showed the Light Neumorphism login form design. In this case, a shadow has been created on a white page using CSS code. That shadow is arranged in the form of a login form. Here the color of the shadow has been blackened so that it can be clearly seen on a white background. Like the general form, there are all sorts of options like email id and password input, above there is a login button to log in.

Watch Demo

#html #css #login #form

Neumorphism Login Form UI Design using HTML & CSS
Ahebwe  Oscar

Ahebwe Oscar

1623175200

How to test a Django ModelForm

Learn how to test a Django ModelForm in isolation in this brief tutorial.

What is a ModelForm in Django?

ModelForm in Django is a convenient abstraction for creating HTML forms tied to Django models.

Consider the following Django model:

#test a django modelform #django #django's tes #how to test a django modelform #form #way to check

How to test a Django ModelForm