form validation complete

2023-01-14 01:22:37 +01:00
parent 1834077952
commit f452bb90ff
3 changed files with 82 additions and 31 deletions
@@ -8,6 +8,7 @@ REACT_APP_IOS_URL="https://play.google.com/store/apps/details?id=com.mermsemr.my
 REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
 REACT_APP_TWITTER="https://twitter.com/fluxtra"

-REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
+# Changed href to this url
+REACT_APP_APPSITE=" http://www.dev.floatev.chiefsoft.us"

 REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
@@ -3521,6 +3521,10 @@ header.fix_style.white_header {
  margin-bottom: 20px;
 }

+.contact_page_section .contact_inner .contact_form form .form-group textarea {
+  resize: none;
+}
+
 /* For the err msg */
 .contact_page_section .contact_inner .contact_form form .form-group span{
  font-size: 12px;
@@ -3529,20 +3533,18 @@ header.fix_style.white_header {
  display: none;
 }

-.contact_page_section .contact_inner .contact_form form .form-group input:invalid ~ span{
+.contact_page_section .contact_inner .contact_form form .form-group input:valid[focused="true"]{
+  border: 1px solid var(--dark-purple);
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"]{
+  border: 1px solid tomato;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"] ~ span{
  display: block;
 }

-/* 
-input:invalid[focused="true"]{
-    border: 1px solid red;
-}
-
-input:invalid[focused="true"] ~ span{
-    display: block;
-}
-*/
-
 .contact_page_section
  .contact_inner
  .contact_form
@@ -1,9 +1,12 @@
+/** @format */
+
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import Bredcrumb from "../Bredcrumb/Main";
 import BGImg from "../../assets/images/bread_crumb_bg.png";
 import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
 import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
+import axios from "axios"

 import SiteService from "../../vendors/service/siteService";

@@ -18,8 +21,14 @@ const FormInput = (props) => {
    errorMessage,
    value,
    onChange,
+    pattern,
  } = props;
-  
+
+  const [focused, setFocused] = useState(false);
+  const handleFocus = () => {
+    return setFocused(true);
+  };
+
  return (
    <div className="form-group">
      <input
@@ -31,6 +40,9 @@ const FormInput = (props) => {
        required={required}
        value={value}
        onChange={onChange}
+        onBlur={handleFocus}
+        pattern={pattern}
+        focused={focused.toString()}
      />
      <span>{errorMessage}</span>
    </div>
@@ -44,7 +56,8 @@ const Main = ({ brdcum }) => {
    email: "",
    phone: "",
    msg: "",
-    country: ''
+    country: "",
+    checkBox: false
  }); //initial state values
  const [countries, setCountries] = useState([]); // initial state for country dropdown

@@ -58,14 +71,16 @@ const Main = ({ brdcum }) => {
  const contactForm = () => {
    return API_CALL.contactData();
  };
+  
+  const onChange = (e) => {
+    setValues((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+  console.log(values)

  // Submitting form
  const handleSubmit = (e) => {
    e.preventDefault();
-  };

-  const onChange = (e) => {
-    setValues({ ...values, [e.target.name]: e.target.value });
  };

  //CALLS THE API AFTER COMPONENT LOADS
@@ -125,7 +140,9 @@ const Main = ({ brdcum }) => {
        />
      )}

-      <section className="contact_page_section" id="contact">
+      <section
+        className="contact_page_section"
+        id="contact">
        <div className="container">
          <div className="contact_inner">
            <div className="contact_form">
@@ -147,13 +164,14 @@ const Main = ({ brdcum }) => {
                  maxLenght={35}
                  value={values.name}
                  onChange={onChange}
+                  pattern="^[A-Za-z]{1,35}$"
                />

                <FormInput
                  name="email"
                  type="email"
                  placeholder="Email"
-                  errorMessag="It should be a valid email address!"
+                  errorMessage="It should be a valid email address!"
                  required={true}
                  maxLenght={35}
                  value={values.email}
@@ -161,11 +179,18 @@ const Main = ({ brdcum }) => {
                />

                <div className="form-group">
-                  <select className="form-control">
-                    <option value={values.country}>Country</option>
+                  <select
+                    className="form-control"
+                    name="country"
+                    value={values.country}
+                    onChange={onChange}
+                    required>
+                    <option value={''} onCha>Country</option>
                    {countries.length > 0 &&
                      countries.map((country, index) => (
-                        <option key={index} value={country}>
+                        <option
+                          key={index}
+                          value={country}>
                          {country}
                        </option>
                      ))}
@@ -189,16 +214,25 @@ const Main = ({ brdcum }) => {
                    placeholder="Your message"
                    value={values.msg}
                    onChange={onChange}
-                  ></textarea>
+                    maxLength={350}
+                  />
                </div>
                <div className="form-group term_check">
-                  <input type="checkbox" id="term" />
+                  <input
+                    type="checkbox"
+                    id="term"
+                    value={values.checkBox}
+                    onChange={onChange}
+                    required
+                  />
                  <label htmlFor="term">
                    I agree to the terms and conditions
                  </label>
                </div>
                <div className="form-group mb-0">
-                  <button type="submit" className="btn puprple_btn">
+                  <button
+                    type="submit"
+                    className="btn puprple_btn" aria-label="submit form">
                    SEND MESSAGE
                  </button>
                </div>
@@ -208,7 +242,10 @@ const Main = ({ brdcum }) => {
            {/* Contact Info */}
            <div className="contact_info">
              <div className="icon">
-                <img src="assets/images/contact_message_icon.png" alt="image" />
+                <img
+                  src="assets/images/contact_message_icon.png"
+                  alt="image"
+                />
              </div>
              <div className="section_title">
                <h2>
@@ -219,13 +256,18 @@ const Main = ({ brdcum }) => {
                  or company, Visit our <Link to="/faq">FAQs page.</Link>
                </p>
              </div>
-              <Link to="/faq" className="btn puprple_btn">
+              <Link
+                to="/faq"
+                className="btn puprple_btn">
                READ FAQ
              </Link>
              <ul className="contact_info_list">
                <li>
                  <div className="img">
-                    <img src="assets/images/mail_icon.png" alt="image" />
+                    <img
+                      src="assets/images/mail_icon.png"
+                      alt="image"
+                    />
                  </div>
                  <div className="text">
                    <span>Email Us</span>
@@ -236,7 +278,10 @@ const Main = ({ brdcum }) => {
                </li>
                <li>
                  <div className="img">
-                    <img src="assets/images/call_icon.png" alt="image" />
+                    <img
+                      src="assets/images/call_icon.png"
+                      alt="image"
+                    />
                  </div>
                  <div className="text">
                    <span>Call Us</span>
@@ -247,7 +292,10 @@ const Main = ({ brdcum }) => {
                </li>
                <li>
                  <div className="img">
-                    <img src="assets/images/location_icon.png" alt="image" />
+                    <img
+                      src="assets/images/location_icon.png"
+                      alt="image"
+                    />
                  </div>
                  <div className="text">
                    <span>Visit Us</span>
@@ -266,4 +314,4 @@ const Main = ({ brdcum }) => {
  );
 };

-export default Main;
+export default Main;