Trigger HTML5 Form Validation on JavaScript Submission (form.submit())

Most of the time when dealing with web forms, we either have a basic version where the user clicks on the submit button and the form submits to the relevant action with the relevant GET/POST method specified (or defaults are used) or on submission of the form we use AJAX/XHR to send the form date to a specific URL with the required request type (GET, POST, PUT, UPDATE, DELETE, etc.). For a long time we had been implementing client side form validations in our JavaScript code (we still do) but then with the advent of the HTML5 constraint validation we have been doing a lot of the form validations right there in the form controls definitions by specifying the right type like email, phone, etc. with/without attributes like pattern, maxlength, required, steps, etc.

Continue reading “Trigger HTML5 Form Validation on JavaScript Submission (form.submit())”

JavaScript Fire onSubmit Event Handler Programmatically by Calling form.submit()

Unless you code your web pages in vanilla javascript, you’ll probably not notice this but when you do it’ll quite baffle you that the event listener you attach to a form’s submit event using addEventListener or onSubmit will not be invoked when you submit the form directly like this – form.submit().

Continue reading “JavaScript Fire onSubmit Event Handler Programmatically by Calling form.submit()”

Prevent Touch Panning and Zooming on Mobile Web Pages with CSS touch-action Property

The new touch-action property from the CSS Pointer Events spec can help us (as developers) specify what sort of manipulation (panning, zooming, etc.) should be allowed by a user in a particular region (one or more DOM elements) in a specific web page on a mobile device. It helps specify the sort of interactions or gestures allowed by the user in one or both axis.

Continue reading “Prevent Touch Panning and Zooming on Mobile Web Pages with CSS touch-action Property”

Quick Tip: Rails Escaping Database Values and Storing/Inserting with Multi-Insert SQL Query

In this quick tip we’ll see how to escape values in Rails before passing them on to an SQL query (preventing injection attacks) and then also look into how to do multi-inserts (at the DB level). Let’s first see how to escape values to prevent SQL injections in Rails:

Continue reading “Quick Tip: Rails Escaping Database Values and Storing/Inserting with Multi-Insert SQL Query”

Remove a Mounted React Component with React.unmountComponentAtNode()

While going through the codebase of React Bootstrap (for some reason), I came across an interesting implementation of a “React playground”. The code behind the playground is in ReactPlayground.js. I found this piece of interesting code there:

Continue reading “Remove a Mounted React Component with React.unmountComponentAtNode()”

React Integrating Routing to Material UI’s Left Nav (or Other Components)

Working with the React Material UI and trying to make routing work (or even understand how it works) with clicks on the LeftNav item items ? It’s actually quite simple once you get a hang of it. I’ll show you the code and explain the logic behind how on clicking navigation links in LeftNav you navigate to different pages/URLs in your app/website (in a snap). We’ll be using React Router, Material UI and obviously, ReactJS itself. I’ve also uploaded the code to Github.

Continue reading “React Integrating Routing to Material UI’s Left Nav (or Other Components)”

React Material UI – Open Left Menu (Navigation Drawer) on AppBar’s Hamburger Icon Click

This is more of a quick tip on a Material UI integration than a detailed article. We’ll see how to open the LeftNav component on clicking the AppBar’s left icon (hamburger menu icon). Unfortunately the documentation as of now doesn’t show the ReactJS code for this. Obviously it’s not too hard to figure it out either if you go through the website’s source itself on Github.

Continue reading “React Material UI – Open Left Menu (Navigation Drawer) on AppBar’s Hamburger Icon Click”