[FYI] How to normalize inputs before submission

[Wikiwi]

This is solution can be used for a specific use case where the users inputs character with diacritical marks in them and you would like to remove or "normalize" those characters. This solution can be useful to have more user-friendly search criteria.

What you would need to do is to put a header & footer on your submission page and put the following code in the footer. Don't forget to disable the HTML editor on the Advanced tab before pasting the code below.

Script:

<script>
document.getElementsByName('Submit')[0].unsafe = function(){

//first_name
var str = document.getElementById('InsertRecordFIELD_NAME').value;
document.getElementById('InsertRecordFirst_Name').value = str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
//last_name

var str = document.getElementById('InsertRecordFIELD_NAME').value;
document.getElementById('InsertRecordLast_Name').value = str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}
</script>

The code will run when the user hovers their mouse on the submit button. See the screenshots below for reference.

Before hovering the mouse: https://aucdn.caspio.com/D4B16000/Screenshot/Screenshot_1_9.png
After: https://aucdn.caspio.com/D4B16000/Screenshot/Screenshot_2_10.png

[MickyMartian232]

import React from "react";
import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>Input Mask Example</h1>
      <h2>Form Example</h2>
      <form className="testform">
        <input type="text" placeholder="First name" name="firstName" />
        <input type="text" placeholder="Last name" name="lastName" />
        <input type="tel" placeholder="Telephone" name="phone" />
        <input type="reset" value="Reset" />
      </form>
      <h2>Form Submitted Data</h2>
      <pre>
        <code>{JSON.stringify(form)}</code>
      </pre>
    </div>
  );
}
export default App;

 

Project

Now we can add some action to these input fields.

1. Import useState.
2. Add an initialState.
3. Add a form state. This allows us to update the state with new values that are typed in the form.
4. Add a way to reset the form.
5. Add a way to "set" the values in the form.

import React, { useState } from "react";
import "./App.css";

function App() {
  const initialState = {
    firstName: "",
    lastName: "",
    phone: "",
  };
  const [form, setForm] = useState(initialState);

  const reset = (event) => {
    event.preventDefault();
    setForm({ ...form, ...initialState });
  };

  return (
    <div className="App">
      <h1>Input Mask Example</h1>
      <h2>Form Example</h2>
      <form onReset={reset} className="testform">
        <input
          type="text"
          placeholder="First name"
          name="firstName"
          value={form.firstName}
          onChange={(event) => {
            const { value } = event.target;
            setForm({ ...form, firstName: value });
          }}
        />
        <input
          type="text"
          placeholder="Last name"
          name="lastName"
          value={form.lastName}
          onChange={(event) => {
            const { value } = event.target;
            setForm({ ...form, lastName: value });
          }}
        />
        <input
          type="tel"
          placeholder="Telephone"
          name="phone"
          value={form.phone}
          onChange={(event) => {
            const { value } = event.target;
            setForm({ ...form, phone: value });
          }}
        />
        <input type="reset" value="Reset" />
      </form>
    </div>
  );
}
export default App;