Validating fields and setting up API/client configurations in Ruby on Rails

Experiencing a challenge with validations, I've created a Rails app (API only using ActiveRecord and Doorkeeper for protection) that successfully validates every request and returns errors in JSON format when a validation error occurs.

Currently, I am working on the client app (also a Rails app without a database or ActiveRecord) that interacts with the API. While I can display validation errors after form submission, the goal is to have client-side JavaScript validation before submitting the form, including checking for uniqueness in certain fields.

I may be overcomplicating things, but how should I tackle this? Should I utilize ActiveModel for basic validation checks? How can I check for uniqueness when the API can only be accessed through Doorkeeper? Would it be advisable to send an AJAX request from the client app for each field requiring unique validation to then make an API call to validate the field's uniqueness?

In your opinion, what would be the optimal solution?

Answer №1

If you have two Rails apps set up, one for the API connected to a database and the other for the front-end without a database, it may be beneficial to simplify your setup by having the API server also host the frontend. Unless your project is exceptionally large and requires complex scalability solutions, eliminating one layer of complexity could streamline your development process.

In the current plan, all form data passes through three main components:

[ front-end js ] ---> [ front-end Rails ] ---> [ back-end Rails ]

While each component has the capability for validation, it may be redundant to implement validation in both the front-end and back-end Rails stacks if they will essentially enforce the same errors. It might be more efficient to focus on validating input at the edges: conduct validations in the front-end JavaScript first, then validate again in the back-end Rails to ensure consistency. Any validation errors from the backend should be relayed to the front-end for proper user display when triggered, which hopefully occurs infrequently.

Regarding uniqueness checks, exposing an endpoint in your API to verify the uniqueness of specific fields as suggested could be a practical approach. Alternatively, depending on the likelihood of collisions, relying on back-end validations to handle non-unique errors may suffice.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"An issue has been encountered with lastID being undefined while using sqlite3 with Node

After successfully inserting into the database, I am encountering an issue where this.lastID is undefined. Can anyone help me troubleshoot this code? app.post('/products/create', (req,res) => { upload(req, res, (err) => { c ...

Error VM2022:2 - SyntaxError encountered while making an AJAX request. This unexpected token ":" is causing the

When I sent a GET request from the backend to retrieve the JSON response, I encountered an error. Uncaught SyntaxError: Unexpected token : at DOMEval (jquery-3.3.1.js:111) at Function.globalEval (jquery-3.3.1.js:345) ...

When attempting to use getElementsByClassName in Selenium, the js.executeScript function does not function as expected

Here is a method I have written: public void delayToCapture(String methodGetBy, String key){ /* List of methodGetBy: * 1. getElementById * 2. getElementsByTagName * 3. getElementsByClassName * 4. querySelectorAll */ Syste ...

Set the input value to null when the ng-hide directive evaluates to true in AngularJS

Hello, I am looking for a way to clear the input text fields when they are hidden using ng-hide="true". I need a solution that dynamically works for multiple hidden inputs. For example, if someone selects "Yes" and enters a child count, then switches to ...

What is the significance of the link function in AngularJS?

I'm trying to fully grasp the concept of the AngularJS link function Here's an example of a custom lazy load directive: script.js: //Code angular.module('app', []); angular.module('app').controller('mainCtrl', fu ...

Access the Google Picker API using pre-saved login credentials

Recently, I successfully integrated the Google Picker API into my project. This feature prompts a window for Google authentication and then displays all the files stored in Google Drive. However, I now have a specific requirement where I want to access th ...

Implementing a JavaScript function to trigger the 'GET' method upon page load repeatedly

I am facing a strange issue where a javascript function is running multiple times upon page load (7 times in Chrome, 3 times in IE, 7 times in Firefox, 6 times in Opera, 4 times in Safari, and 4 times in Edge). What's going on??? Moreover, the xmlHtt ...

"Adjusting the AJAX call destination based on the current view or page: A step-by-step guide

I am currently conducting tests on a .js script using Qunit. Within my static .html test harness, I have included the .js "code under test" (CUT) along with appropriate markup. The actual testing is happening in another script that is also incorporated in ...

Make sure to include !important for the hidden property when applying inline styles in React jsx

Is there a way to include !important in the hidden property within React JSX inline style? I'm attempting to conceal the scroll bar in an Ag Grid table component as it is displayed by default. I've already attempted: ref={(nod ...

What is the process for including "onload" in my Dojo class?

Is there a way for me to incorporate an "onload" function into my personalized Dojo class which can trigger functions that are registered to listen for the event? Perhaps something like myWidget.addOnLoad(...) My class doesn't belong to Dijit, it&apo ...

Having trouble installing expo-cli globally

As someone who is new to react-native, I recently encountered an issue while setting up my project. After installing all the necessary packages and attempting to start with the npm start command, I was met with the error message 'expo-cli' is not ...

React: Placing a value directly at the cursor

How can I dynamically insert a selected value from a dropdown into an input field at the position of the cursor? import { useState } from "react"; import "./styles.css"; export default function App() { const [cur, setCur] = useState( ...

Managing promises with recursion in JavaScript: Best practices

I need a solution to go through all the files in a directory recursively and receive confirmation once all files have been processed. The directory structure is outlined below: sample │ app.js └───Temp1 │ │ temp1.js └───Temp2 ...

Which method is optimal for organizing tree categories and linking them to posts, as well as locating posts based on a selected category within a MERN stack

Currently, I am utilizing the MERN stack for my project development. The project involves a tree category structure as outlined below: {id: { type: Number }, parent_id: { type: Number }, name: { type: String }, sub: { type: Boolean }} For ...

Utilize a Material UI GridList to transform images into a captivating background display

Incorporating a GridList displaying a variety of images fetched from an external source, I have successfully created an ever-changing image gallery. Now, my goal is to convert this dynamic image gallery into grayscale or transparency and utilize it as a ba ...

Discovering the root cause of why a particular CSS style is not being implemented correctly

Currently, I am in the process of developing a secondary theme for one of my websites. It's going to be a dark theme. I'm facing an issue where a specific CSS style is not being applied to a particular element, even though it works perfectly fine ...

Unlocking the Power of the Javascript Load Function: Double the Load, Double the Impact!

I have set up a page where I am using the onclick load function to load a PHP file into a div. Now, my goal is to load another file into a different div from the previously imported file. For example: [ Category 1 | Category 2 | Category 3 | Category 4 ...

How to delete sections of a grid using jquery

I don't mean to be blunt, but I have organized these into a grid: $('#grid .box:eq(2)').append('<h1>P</h1>'); $('#grid .box:eq(27)').append('<h1>P</h1>'); $('#grid .box:eq(3 ...

Generating CSS Selectors with JavaScript

Presently, I am attempting to devise CSS Selectors using JavaScript specifically tailored for particular web browsers and mobile devices. The current method in place is as follows: // IDENTIFY BROWSER AND APPLY CORRESPONDING CSS METHOD function getBr ...

Tips for controlling frustum in three.js

Recently, I came across a fascinating parallax view implementation that creates an illusion of depth, and now I'm eager to recreate something similar using Three.js. One hurdle I've encountered is the need for a non-symmetric camera frustum. Ess ...