nfsfu234-form-validation
Version:
NFSFU234FormValidation is a lightweight and user-friendly JavaScript library designed for validating HTML form elements, with a special emphasis on textarea fields. It offers customizable validation messages, comprehensive support for required field check
1 lines • 9.51 kB
Source Map (JSON)
{"version":3,"sources":["../../src/css/nfsfu234FormValidation.css"],"names":[],"mappings":"AACA,MACI,iBAAkB,CAClB,iBAAkB,CAClB,iBAAkB,CAClB,YAAgB,CAChB,YACF,CAGA,mBACE,2BACF,CAGA,WACE,mCAAqC,CACrC,4BACF,CAGA,cACE,8BACF,CAGA,MACE,mCAAqC,CACrC,4BACF,CAGA,yBAEE,8BACF,CAGA,SACE,mCAAqC,CACrC,4BACF,CAGA,mBACE,yCAA2C,CAC3C,8BACF,CAGA,qBACE,yCAA2C,CAC3C,8BACF,CAGA,mBACE,oBAAqB,CAGrB,aAAc,CAFd,4BAA8B,CAI9B,YAAa,CAHb,wBAAyB,CAEzB,UAEF,CAKA,0BAIE,uBAAmB,CAAnB,kBAAmB,CAHnB,iBAAkB,CAClB,KAAM,CACN,UAEF,CAGA,yDAGE,cAAe,CAGf,gCAAkC,CADlC,kBAAmB,CADnB,UAAW,CAMX,YAAa,CAFb,kBAAmB,CADnB,eAAgB,CANhB,iBAAkB,CAUlB,iCAAmC,CATnC,4BAUF,CAGA,kEAME,kBAAmB,CADnB,YAAa,CAHb,WAAY,CAKZ,sBAAuB,CACvB,oBAAqB,CAJrB,eAAgB,CADhB,eAAiB,CAOjB,iBAAkB,CADlB,wBAAyB,CARzB,uBAUF,CAGA,+DASE,kBAAmB,CAHnB,eAAgB,CAChB,SAAU,CACV,YAAa,CAJb,WAAY,CAMZ,sBAAuB,CATvB,iBAAkB,CAElB,OAAQ,CADR,KAAM,CAGN,UAMF,CAGA,mEACE,UAAW,CACX,SAAU,CACV,iBACF,CAGA,gEACE,uBACF,CAGA,iEACE,yBAA0B,CAC1B,2CACF,CAGA,uEACE,oBACF,CAGA,gBACE,GACI,uBACJ,CACF,CAGA,eAGE,iCACF,CAEA,qBAIE,WAAY,CADZ,UAEF,CAGA,iBAME,eAAgB,CAJhB,QAAS,CAKT,UAAW,CAHX,WAAY,CAHZ,iBAAkB,CAElB,OAAQ,CAER,UAAW,CAGX,SAAU,CAEV,kBAAmB,CADnB,YAAa,CAEb,sBACF,CAGA,qBAEE,WAAY,CADZ,UAEF","file":"nfsfu234FormValidation.min.css","sourcesContent":["/* Define custom CSS variables */\n:root {\n --success: #4caf50; /* Define a custom variable for success color */\n --failure: #f44336; /* Define a custom variable for failure color */\n --warning: #ff9800; /* Define a custom variable for warning color */\n --white: #ffffff; /* Define a custom variable for white color */\n --black: #000000; /* Define a custom variable for black color */\n }\n \n /* Utility class for relative positioning */\n .relative-position {\n position: relative !important; /* Apply relative positioning to the element */\n }\n \n /* Utility class for background color indicating success */\n .bgSuccess {\n background: var(--success) !important; /* Set background color to the defined success color */\n color: var(--white) !important; /* Set text color to white */\n }\n \n /* Utility class for text color indicating success */\n .text-success {\n color: var(--success) !important; /* Set text color to the defined success color */\n }\n \n /* Utility class for background color indicating failure */\n .fail {\n background: var(--failure) !important; /* Set background color to the defined failure color */\n color: var(--white) !important; /* Set text color to white */\n }\n \n /* Utility class for text color indicating failure */\n .text-failure,\n .text-fail {\n color: var(--failure) !important; /* Set text color to the defined failure color */\n }\n \n /* Utility class for background color indicating warning */\n .warning {\n background: var(--warning) !important; /* Set background color to the defined warning color */\n color: var(--white) !important; /* Set text color to white */\n }\n \n /* Utility class for input focus with error */\n .input-focus-error {\n border: 1px solid var(--failure) !important; /* Set border color to the defined failure color */\n color: var(--failure) !important; /* Set text color to the defined failure color */\n }\n \n /* Utility class for input focus with success */\n .input-focus-success {\n border: 1px solid var(--success) !important; /* Set border color to the defined failure color */\n color: var(--success) !important; /* Set text color to the defined failure color */\n }\n \n /* Utility class for inline error message */\n .js-inline-message {\n color: var(--failure); /* Set text color to the defined failure color */\n font-size: calc(100% - 0.3rem); /* Reduce font size slightly compared to parent element */\n text-transform: uppercase; /* Convert text to uppercase */\n display: block; \n width: 100%;\n margin: 5px 0;\n }\n \n \n \n /* Styling for error container */\n .js-errorMessageContainer {\n position: absolute; /* Absolute positioning to place it correctly */\n top: 0; /* Position at the top of the container */\n width: 100%; /* Take the full width of the container */\n height: max-content; /* Adjust height based on content inside */\n }\n \n /* Styling for login error message container */\n .js-errorMessageContainer .login-error-message-container {\n position: relative; /* Relative positioning for child elements */\n width: clamp(100%, 80vw, 300px); /* Width is responsive between 100% and 300px */\n background: red; /* Background color for error container */\n color: #fff; /* Text color for error message */\n border-radius: 10px; /* Rounded corners for the container */\n border: 1.5px solid red !important; /* Red border for the container */\n overflow: hidden; /* Hide overflowing content */\n margin-bottom: 10px; /* Add space at the bottom of the container */\n /* margin-top: -100px; */ /* (Commented out) Adjust top margin if needed */\n display: none; /* Initially hide the container */\n transition: 0.5s margin ease-in-out; /* Add smooth transition for margin */\n }\n \n /* Styling for the message inside error container */\n .js-errorMessageContainer .login-error-message-container .message {\n width: calc(100% - 50px); /* Calculate width minus icon space */\n height: 100%; /* Take full height of the container */\n padding: 0 0.3rem; /* Add padding to the message */\n min-height: 50px; /* Set minimum height for the container */\n display: flex; /* Display as flex for centering content */\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n letter-spacing: 1.5px; /* Add letter spacing for uppercase text */\n text-transform: uppercase; /* Convert text to uppercase */\n text-align: center; /* Center text within the container */\n }\n \n /* Styling for the icon inside error container */\n .js-errorMessageContainer .login-error-message-container .icon {\n position: absolute; /* Absolute positioning for the icon */\n top: 0; /* Position at the top of the container */\n right: 0; /* Position at the right of the container */\n height: 100%; /* Take full height of the container */\n width: 50px; /* Set width for the icon space */\n background: #fff; /* Background color for the icon space */\n color: red; /* Icon color (red for error) */\n display: flex; /* Display as flex for centering content */\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n }\n \n /* Styling for SVG icon inside error container */\n .js-errorMessageContainer .login-error-message-container .icon svg {\n height: 60%; /* Set height of the SVG icon */\n width: 60%; /* Set width of the SVG icon */\n fill: currentColor; /* Set SVG icon fill color to current color (red) */\n }\n \n /* Styling for active state of the error container */\n .js-errorMessageContainer .login-error-message-container.active {\n display: block !important; /* Display the container when active */\n }\n \n /* Styling for success state of the error container */\n .js-errorMessageContainer .login-error-message-container.success {\n background: var(--success); /* Background color for success state */\n border: 1.5px solid var(--success) !important; /* Border color for success state */\n }\n \n /* Styling for success icon in the error container */\n .js-errorMessageContainer .login-error-message-container.success .icon {\n color: var(--success); /* Icon color for success state */\n }\n \n /* Keyframes animation for spinning */\n @keyframes spin {\n 100% {\n transform: rotate(360deg); /* Rotate the element fully */\n }\n }\n \n /* Styling for elements with the spin class */\n .spin, \n .js-spin\n {\n animation: spin 1s infinite linear; /* Apply the spinning animation */\n }\n\n svg.spin, \n svg.js-spin\n {\n width: 25px;\n height: 25px;\n }\n \n /* Styling for show password button */\n .cssShowPassword {\n position: absolute; /* Absolute positioning for the button */\n bottom: 0; /* Position at the bottom of the container */\n right: 0; /* Position at the right of the container */\n height: 50px; /* Set height for the button */\n width: 50px; /* Set width for the button */\n background: #000; /* Background color for the button */\n color: #fff; /* Text color for the button */\n fill: #fff; /* Icon fill color for the button */\n display: flex; /* Display as flex for centering content */\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n }\n \n /* Styling for SVG icon inside show password button */\n .cssShowPassword svg {\n width: 25px; /* Set width of the SVG icon */\n height: 25px; /* Set height of the SVG icon */\n }\n "]}