Validation form

🎯 Description

This repository serves as a complete example of a form with different types of fields, including required validations and custom text fields.

The components are meticulously structured, following the BEM (Block Element Modifier) and ITCSS (Inverted Triangle CSS) architecture, ensuring easy maintenance and scalability as the project grows.

Integrating client-side JS validations enhances the user experience by providing real-time feedback as they interact with form fields.

Whether you want to improve your form building skills or are looking for organizational inspiration, these components provide an excellent starting point. They provide a valuable reference for other web development projects, provide a solid CSS class structure, powerful client-side JS validations, and unique custom elements.

The best part is that you can easily customize these components to fit your specific project requirements, making them adaptable and valuable for various web development endeavors.

🏗️ Developed with

This project is developed inside of src folder, using in HTML, CSS (with the SASS preprocessor) and JS (with the Jquery library). To streamline the build process, the project utilizes the Gulp task runner, which compiles and optimizes the files, placing them in the dist folder. Once everything is ready, the project is published using an NPM script in the gh-page branch on GitHub.

Here are the main technologies and tools used in this project:

Javascript

JQuery 3.4.1

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jQuery Validation 1.19.1

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 other languages.

Some more methods are provided as add-ons, and are currently included in additional-methods.min.js in the download package. You can find the source code for all additional methods in the GitHub repository.

CKEditor 4

Modern JavaScript rich text editor with a modular architecture. Its clean UI and features provide the perfect WYSIWYG UX ❤️ for creating semantic content. It is full of features like pasting from Word, Excel and Google Docs. It's excellent table support with column resizing, row and column selection. You can include multimedia embeds as insert images, videos, tweets, Instagram posts widgets, code snippets, mathematical formulas and more. It has spreadsheets to create data grids within the editor. It uses autocomplete, @mentions, emoji 😊, styling and formatting plugins (copy formatting feature). It is designed with inline and iframe UI, autogrow, maximize mode for distraction-free typing with the read-only mode ...and more!

Here you can see the README.md file of this project and the samples folder.

Gulp

As mentioned above, this project makes use of the Gulp task runner. The gulpfile.js file contains several Gulp tasks designed to:

• Compile and compress SASS and JS files.
• Copy and paste HTML files and ICOMOON icon fonts.
• Create a server and enable live reloading using Browsersync + Gulp.js.

So project development takes place in the src and the final optimized content is generated in the dist folder for publishing. This setup ensures an efficient and organized workflow for web development.

🚀 Commands

Install dependencies

To configure the project, after cloning this repository, you need to install the required NPM packages.

npm install

Deploy project

Once the development of the code in the src folder is finished, you can publish the project with the contents of the dist folder to Github Pages (gh-pages branch).

npm run deploy

Build files, run server and watch changes

The default gulp task handles various tasks:

1. Creates the dist folder if it does not exist.
2. Build html, css, js and font icons of icomoon in the dist folder.
3. Watch for changes inside the src folder to rebuild the files.
4. Sets a server and reloads it automatically when changes are made to the dist folder.

gulp

Create and run server

This command is able to:

1. Create a static server with the browserSync package.
2. Serve the files in the dist folder.
3. Open the default index.html file in any of these browsers: Chrome and Firefox.

gulp serve

Watch for changes

This command is a powerful tool that performs the following tasks:

1. Create and launch a server.
2. Observe the changes in the html, sass, icomoon and js files located inside the src folder.
3. When a change occurs, runs the necessary tasks to re-generate the files inside the dist folder.
4. Consequently, it reloads the server automatically, if there are any changes in the files inside the dist folder.

This ensures a smooth development experience, as you can make changes to your source files and see updates in real time without manually refreshing the page.

gulp watch

Build files

This command is able to:

1. Creates the dist folder if it does not exist.
2. Build the html, css, js and icomoon on dist folder.

gulp build

Build HTML files

This command is able to:

1. Creates the dist folder if it does not exist.
2. Copies the html files from the src folder to the dist folder.

gulp html

Build CSS files

This command is able to:

1. Creates the dist folder if it does not exist.
2. Performs a series of processes:
   • Compiles the styles.sass file, including its imported partials located at src/sass/.
   • Adds prefixes to CSS. properties for better browser compatibility.
   • Compresses the CSS. file to reduce its size for optimized performance.
   • Creates and adds a mapping for the debugger styles in the browser inspector for easier debugging.
   • Applies a Gulp Plugin, Line Ending Corrector, to ensure consistent line endings in your CSS. files.
3. Export the styles.min.css file to dist/css/ folder.

gulp css

Build JS files

This command is able to:

1. Creates the dist folder if it does not exist.
2. Copies files of JS libraries from src/js/libs and pastes them into dist/js/libs folder.
3. Performs a series of processes:
   • Compile partials JS files partials located at src/js/.
   • Use Babel, a JavaScript compiler, to ensure backward compatibility and compatibility with various browsers.
   • Minifies the concatenated file, reducing its size for optimized performance.
   • Applies a Gulp Plugin, Line Ending Corrector, to ensure consistent line endings in your JS. files.
4. Export the scripts.min.js file to dist/js folder.

gulp js

Build icon files

This project uses icons from icomoon.io, an online tool app that has 2 buttons to generate SVG & More and generate Font.
The src/icomoon/ folder contains a mix of both downloaded folders.

This command is able to:

1. Creates the dist folder if it does not exist.
2. Gets style.css file from src/icomoon/ folder, generates a new compressed file, renames it fonts.min.css and export the file to dist/icomoon.
3. Copy directory src/icomoon/fonts, containing the fonts (EOT, SVG, TTF, WOFF), and paste the files into dist/icomoon/fonts

gulp icon

🚧 Status

There is still room for improvement in validation, such as the implementation of showing/hiding fields dynamically as the user fills/hides them... and many other potential areas.