Implement validating form on pressing 'Enter' on input fields.

src/Form.jsx

@@ -149,6 +149,12 @@ function Form() {
     },
   ];
 
+  const handlePressEnter = (e, field = null) => {
+    if (e.key === 'Enter') {
+      handleBlur(field);
+    }
+  };
+
   const focusField = (fieldName) => {
     document.getElementById(fieldName).focus();
   };
@@ -304,6 +310,7 @@ function Form() {
                   id="amount"
                   value={amount}
                   onChange={(e) => setAmount(e.target.value)}
+                  onKeyDown={(e) => handlePressEnter(e)}
                   onBlur={handleBlur}
                   style={{ borderColor: getBorderColor('amount') }}
                 />
@@ -345,6 +352,7 @@ function Form() {
                 value={bnfBankBic}
                 onChange={(e) => setBNFBankBic(e.target.value)}
                 onBlur={(e) => handleBlur('bnf_bank_bic')}
+                onKeyDown={(e) => handlePressEnter(e, 'bnf_bank_bic')}
                 style={{
                   maxWidth: '32ch',
                   borderColor: getBorderColor('bnf_bank_bic'),
@@ -372,6 +380,7 @@ function Form() {
                 value={bnfAccount}
                 onChange={(e) => setBNFAccount(e.target.value)}
                 onBlur={(e) => handleBlur('bnf_account')}
+                onKeyDown={(e) => handlePressEnter(e, 'bnf_account')}
                 style={{
                   maxWidth: '32ch',
                   borderColor: getBorderColor('bnf_account'),
@@ -385,6 +394,7 @@ function Form() {
                 value={bnfINN}
                 onChange={(e) => setBNFINN(e.target.value)}
                 onBlur={(e) => handleBlur('bnf_inn')}
+                onKeyDown={(e) => handlePressEnter(e, 'bnf_inn')}
                 style={{
                   maxWidth: '32ch',
                   borderColor: getBorderColor('bnf_inn'),
@@ -398,6 +408,7 @@ function Form() {
                 value={bnfKPP}
                 onChange={(e) => setBNFKPP(e.target.value)}
                 onBlur={handleBlur}
+                onKeyDown={(e) => handlePressEnter(e)}
                 style={{
                   maxWidth: '32ch',
                   borderColor: getBorderColor('bnf_kpp'),
@@ -413,6 +424,7 @@ function Form() {
                 value={bnfName}
                 onChange={(e) => setBNFName(e.target.value)}
                 onBlur={handleBlur}
+                onKeyDown={(e) => handlePressEnter(e)}
                 style={{
                   width: '91%',
                   borderColor: getBorderColor('bnf_name'),
@@ -428,6 +440,7 @@ function Form() {
                 value={paymentDetails}
                 onChange={(e) => setPaymentDetails(e.target.value)}
                 onBlur={handleBlur}
+                onKeyDown={(e) => handlePressEnter(e)}
                 style={{
                   height: '60px',
                   borderColor: getBorderColor('payment_details'),
@@ -463,6 +476,7 @@ function Form() {
                 value={taxUINCode}
                 onChange={(e) => setTaxUINCode(e.target.value)}
                 onBlur={handleBlur}
+                onKeyDown={(e) => handlePressEnter(e)}
                 style={{ maxWidth: '32ch' }}
               />
             </div>