|
Hello,
I am creating a User registration form using React JS and as I have defined the fields and its validations along with the submit handler, it does not console log Hello World after pressing submit button. It doesn't seem to function at all. I am sharing my code below:
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import "./Userform.css";
import axios from "axios";
function Userform() {
const schema = yup.object().shape({
name: yup.string().required("Name is required"),
dobOrAge: yup.string().required("Age is required"),
sex: yup.string().required("Sex is required"),
mobile: yup
.string()
.matches(
/^[6-9]\d{9}$/,
"Mobile number must be a valid Indian mobile number"
)
.nullable(),
idType: yup.string().required("ID type is required"),
id: yup.string().when("idType", {
is: "Aadhar",
then: yup
.string()
.matches(/^\d{12}$/, "Govt Id must be a valid 12-digit numeric string"),
otherwise: yup
.string()
.matches(
/^[A-Za-z]{5}\d{4}[A-Za-z]{1}$/,
"Govt Id must be a valid 10-digit alpha-numeric string"
),
}),
email: yup.string("Email must be a valid email address").nullable(),
emergencyContactNumber: yup
.string()
.matches(
/^[6-9]\d{9}$/,
"Emergency Contact Number must be a valid Indian mobile number"
)
.nullable(),
guardianTitle: yup.string().nullable(),
guardianName: yup.string().nullable(),
address: yup.string().nullable(),
country: yup.string().nullable(),
state: yup.string().nullable(),
pincode: yup.string().nullable(),
city: yup.string().nullable(),
occupation: yup.string().nullable(),
nationality: yup.string().nullable(),
religion: yup.string().nullable(),
maritalStatus: yup.string().nullable(),
bloodGroup: yup.string().nullable(),
});
const resolver = yupResolver(schema);
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm({
resolver,
});
const [message, setMessage] = useState(null);
const onSubmithandler = (data) => {
console.log(data);
};
return (
<div className="form-container">
<form onSubmit={handleSubmit(onSubmithandler)}>
<div>
<h2 className="form-heading">Personal Details</h2>
<label className="form-label"> Name: </label>
<input
className="form-input"
type="text"
placeholder="Enter your full name"
{...register("name", { required: true })}
/>
{errors.name && <p className="form-error">{errors.name.message}</p>}
</div>
<div>
<label className="form-label">Sex :</label>
<input
className="form-input"
type="text"
{...register("sex", { required: true })}
/>
{errors.sex && <p className="form-error">{errors.sex.message}</p>}
</div>
<div>
<label className="form-label">Mobile:</label>
<input className="form-input" type="text" {...register("mobile")} />
{errors.mobile && (
<p className="form-error">{errors.mobile.message}</p>
)}
</div>
<div>
<label>
ID Type:
<select {...register("idType")}>
<option value="">Select ID Type</option>
<option value="Aadhar">Aadhar</option>
<option value="PAN">PAN</option>
</select>
{errors.idType && <p>{errors.idType.message}</p>}
</label>
<label>
Govt Issued ID:
<input type="text" {...register("id")} />
{errors.id && <p>{errors.id.message}</p>}
</label>
</div>
<h2 className="form-heading">Contact Details</h2>
<div>
<label className="form-label">Email:</label>
<input className="form-input" type="email" {...register("email")} />
{errors.email && <p className="form-error">{errors.email.message}</p>}
<label className="form-label">Emergency contact number:</label>
<input
className="form-input"
type="text"
{...register("emergencyContactNumber")}
/>
{errors.emergencyContactNumber && (
<p className="form-error">
{errors.emergencyContactNumber.message}
</p>
)}
</div>
<div>
<label className="form-label">Guardian Details:</label>
<select className="form-select" {...register("guardianTitle")}>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
</select>
<input
className="form-input"
type="text"
{...register("guardianName")}
/>
{errors.guardianName && (
<p className="form-error">{errors.guardianName.message}</p>
)}
</div>
<h2 className="form-heading">Address Details</h2>
<div>
<label className="form-label">Address:</label>
<input className="form-input" type="text" {...register("address")} />
{errors.address && (
<p className="form-error">{errors.address.message}</p>
)}
<label className="form-label">Country:</label>
<input className="form-input" type="text" {...register("country")} />
{errors.country && (
<p className="form-error">{errors.country.message}</p>
)}
</div>
<div>
<label className="form-label">State:</label>
<input className="form-input" type="text" {...register("state")} />
{errors.state && <p className="form-error">{errors.state.message}</p>}
</div>
<div>
<label className="form-label">Pincode:</label>
<input className="form-input" type="text" {...register("pincode")} />
{errors.pincode && (
<p className="form-error">{errors.pincode.message}</p>
)}
</div>
<div>
<label className="form-label">City:</label>
<input className="form-input" type="text" {...register("city")} />
{errors.city && <p className="form-error">{errors.city.message}</p>}
</div>
<h2 className="form-heading">Other Details</h2>
<div>
<label className="form-label">Occupation</label>
<input
className="form-input"
type="text"
{...register("occupation")}
/>
{errors.occupation && (
<p className="form-error">{errors.occupation.message}</p>
)}
</div>
<div>
<label className="form-label">Religion</label>
<select className="form-select" {...register("religion")}>
<option value="Hindu">Hindu</option>
<option value="Muslim">Muslim</option>
<option value="Christian">Christian</option>
<option value="Sikh">Sikh</option>
<option value="Jain">Jain</option>
<option value="Buddhist">Buddhist</option>
</select>
</div>
<div>
<label className="form-label">Marital status</label>
<select className="form-select" {...register("marital")}>
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
</select>
</div>
<div>
<label className="form-label">Blood Group</label>
<select className="form-select" {...register("blood")}>
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
</select>
</div>
<div>
<label className="form-label">Nationality</label>
<input
className="form-input"
type="text"
{...register("nationality")}
/>
{errors.nationality && (
<p className="form-error">{errors.nationality.message}</p>
)}
</div>
<button type="submit">Submit</button>
{message && <p>{message}</p>}
</form>
</div>
);
}
export default Userform;
I am filling in the form but as I submit it is not showing Hello World. Please help as to what should be done.
|
|
|
|
|
Hello friends,
I'm testing sciter (very impressed so far!) for a wrapper around a local intranet web page.
The intranet page's ssl certificate (https://intranet.local) is signed with the local Windows CA; the CA's root certificate is installed in Windows.
When I open the intranet page in Firefox etc. the site's certificate is accepted just fine.
Using scapp.exe with main.html <iframe src="https://intranet.local/"></iframe> it complains about the cerificate and even accepting the cert does not work.
Anything I can do here?
TIA!
|
|
|
|
|
You may have noticed this is a forum for web development. It sounds like you're having issues with a third-party application. If this is what you're referring to, then you may have better luck posting your question in the article's comments.
It could be that this app, scapp.exe, is within a different environment. For instance, you can use curl on Windows, but that doesn't mean it'll use the Windows CA store by default. But again, you'd have better luck asking for help with the author of the application and/or support for the application, rather than asking a general web development forum for help.
Jeremy Falcon
|
|
|
|
|
Hi Jeremy,
thanks for your reply.
Actually, scapp.exe is from the sciter examples itself as referred at https://sciter.com/scapp/
"ScApp – standalone Sciter executable". Sorry for not mentioning that. I suppose it's not a third party app?
What forum do you suggest I can ask for help here?
TIA!
|
|
|
|
|
|
I need to center a text vertically (and horizontally) along the whole page, and for that I need to setup the height property as relative, respectively whole page. I have tried:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</script>
<style>
body {
font-family: Arial;
color: #f9f9ff;
background-color:#293138;
}
.center-text {
height:100%;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<div class="center-text">
Test
</div>
</body>
</html>
How can I achieve this ?
|
|
|
|
|
|
Excellent ! It works. Thanks!
|
|
|
|
|
_Flaviu wrote: How can I achieve this ?
Take you pick: 11 Ways to Center Div or Text in Div in CSS[^]
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
|
|
|
|
|
I have read that post, I didn't noticed any solution with relative height, I've read not very carefully though.
|
|
|
|
|
I’m undergoing an intensive programming boot-camp over 12 weeks. I learned html,css, js,php, react, laravel and nodejs. I need to do a final project over 30 days. Below are the requirements:
Minimum of two user types: admin, user, client, buyer, seller, etc.
Push Notification or Email System
At least two features from the below list:
Chatbot
ChatGPT API
Graphs and Charts
Parallax / Animations
Multi-Language
Multi-Theme
Machine Learning Predications
Data-Related Features.
I’m encouraged to pick up on a project that is not related to Web Development, specifically: Mobile Application,Internet of Things, Arduino, AI…
I need some ideas with chatgpt api integrated into them. For example one of my collogues proposed a smart wallet that takes the user salary, goals and based on that will create a customizable plan, it will use chatgpt to give the user advices and push notifications when he/she purchase stuff that exceeds the budget.
Thanks in advance
|
|
|
|
|
Why pick the ones you don't understand (and which most likely the "teacher" didn't either, at this stage). 30 Days.
"Before entering on an understanding, I have meditated for a long time, and have foreseen what might happen. It is not genius which reveals to me suddenly, secretly, what I have to say or to do in a circumstance unexpected by other people; it is reflection, it is meditation." - Napoleon I
|
|
|
|
|
<pre>How to add horizontal line under DIV</pre>
|
|
|
|
|
|
I never mastered web development, but I did master the horizontal rule.
"Before entering on an understanding, I have meditated for a long time, and have foreseen what might happen. It is not genius which reveals to me suddenly, secretly, what I have to say or to do in a circumstance unexpected by other people; it is reflection, it is meditation." - Napoleon I
|
|
|
|
|
The horizontal rule answer will work perfectly. But, if you don't want to create a separate element (tag) for it, then there is a second way... just use the bottom border on the div tag itself. Divs by default will span 100% of their container, so the net effect would be the same as a hr tag but while keeping the document tree clean.
#with-border {
border-bottom: black 1px solid;
}
<div id="with-border">
Howdy
</div>
Jeremy Falcon
|
|
|
|
|
there is a <hr> html tag for this purpose, and you can further sytle it with CSS if you want.
Vefa
|
|
|
|
|
1. You are replying to the wrong person.
2. The post is almost a year old.
3. The <hr> element was already mentioned by Richard MacCutchan in the first reply to the question.
Resurrecting old posts to repeat what has already been said stinks of plagiarism, which is not tolerated here, and of "rep point farming", which is also not tolerated.
If you're going to reply to a question, make sure you have read and understood the question, that your answer hasn't already been posted, and that you are replying to the correct message.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
vefaakin wrote: there is a <hr> html tag for this purpose, and you can further style it with CSS if you want.
And it shouldn't be used. Stop giving terrible advice online. It's conflating presentation with semantic markup of a document. Using an hr tag is no better than using a bold tag or marquee tag. Just because they exist doesn't mean it's a good idea.
Jeremy Falcon
|
|
|
|
|
Also, I think the only reason your question was downvoted btw was because it was poorly formatted. You'll probably get more answers if you put just a bit off effort into the question. Just a tip for next time. 
Jeremy Falcon
|
|
|
|
|
I am attempting to add facebook and twitter share button plugins to the pages of a website I am working on. So far I have only added them to three pages because I am having mixed results with functionality on both my local copy of the site and the live version.
In order to generate the code for the facebook share button on each page, I followed the instructions here - https://developers.facebook.com/docs/plugins/share-button.
In order to generate the code for the Twitter share button, I followed the instructions here https://publish.twitter.com/#
For both the facebook and twitter share buttons I generated the code using the urls of the live site and pasted that code in both the relevant live and local pages.
The code generated and embedded in the divs "shares" and "share-box" is as follows:
<pre><!--
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v16.0" nonce="bZ0Vs3J7"></script>
<div id = "shares">
<!--
<div class = "share-box">
<div class="fb-share-button"
data-href="https://superspreads.co.uk/superspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html"
data-layout="button"
data-size="small">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsuperspreads.co.uk%2Fsuperspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a>
</div>
</div>
<!--
<div class = "share-box ">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button"
data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
Opera is the only browser that tolerates the plugins on both a local copy of the site and the live version
In firefox, the local copy of the site tolerates both the plugins and they work as intended. That is clicking the "share" or "tweet" buttons activates the relevant plugin and provides the opportunity to share the chosen url on facebook and twitter respectively. The information in the page specific open grapgh tags and twitter meta tags are collected also.
As you hover over the facebook button, prior to clicking, the code that will be parsed is:
https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&sdk=joey&u=https://superspreads.co.uk/superspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html&display+popup&ref=plugin&src=share_button
As you hover over the twitter button, prior to clicking, the code that will be parsed is:
https://twitter.com/intent/tweet?ref_src=twsrc^tfw|twcamp^buttonembed|twterm^share|twgr^&text=Areas I cover| Plasterer | Super Spreads - Dewsbury - West Yorkshire&url=https://superspreads.co.uk/superspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html
With the live site, firefox shows the anchor text for each button, "Share" and "Tweet", when the page is first loaded, but not the graphics for each button. When the page is refreashed "Share" dissappears. "Tweet" remains and the link works to a point but not all the intended code is parsed. The plugin is reduced to providing you a means to tweet something but not share the intended url. Hence as you hover over the twitter anchor text, in this instance, the code that will be parsed is:
https://twitter.com/share?ref_src=twsrc^tfw
chrome and edge behave the same for both the local and live versions of the site: The facebook button functions and displays as intended. The twitter button only displays the link text, "Tweet", and as with the live firefox twitter link, not all the intended code is parsed.
safari struggles to fully load the pages of the local version of the site that have the facebook and twitter plugins code active on them. And won't go beyond the SERP when you click on the live site link there.
Because the plugin code comes from the recommended sources, and has been pasted into the sites html as instructed, I really am at a loss as to how to tackle the problem. Has anyone encountered this before and solved the issue?
I wondered if it might be something to do with my host provider but then the problems are not limited to the live site....
Thanks, in anticipation of your response.
|
|
|
|
|
UPDATE:
I have discovered that all the functionality failings mentioned in my original post are only relevant to when you are on a desktop device! I'm unsure about tablets aswell becasue I don't have one to test with...
However, I downloaded all the browsers to my mobile and the share buttons worked on all of them. Plus the information they retrieved from each page for sharing purposes was accurate also.
I am still stumped, and cross actually, that there should be an issue with the functionality on desktop appliances. Although 98%+ of social media browsing is carried out on phones and tablets in 2023 overall just under 50% of other browsing is still carried out on desktops (https://www.broadbandsearch.net/blog/mobile-desktop-internet-usage-statistics). Plus with all the efforts web designers/developers have to go to to make their sites work on all platforms, why are big tech providing code resources that are throwing up these problems?
I still want to keep this post open because the issue is not solved on desktops. And I'm about to design a site that sells images. I doubt many people will part with substantial sums by what they see of these images on a mobile device... And they are hardly going to be encouraged by seeing/experiencing broken social links on all the pages they care to view on their desktop.
If anyone can share with me how they incorporated their share buttons across all devices successfully, I'd really appreciate it.
|
|
|
|
|
UPDATE-2 > PROBLEM SOLVED > 27.04.2023
As I pointed out in my first post of this thread, I assumed the best way to achieve adding facebook and twitter share buttons to a site I work on would be to utilise the code generation tools I found on official sources for both facebook and twitter.
I was stumped by the poor results of the plugins, produced by these facebook and twitter resources, when using a multitude of browsers on a desktop computer (chrome, firefox, edge, safari and opera).
When using the internet, on a desktop computer, to do doing something non code related I stumbled upon a webpage that had functioning social media share buttons. I viewed the source code and adapted what I found for the site I work on - including styling these buttons in a fashion that suited the sites colour scheme. My adaptations worked for both facebook and twitter. This webpage also had code for sharing the page via email. So I adapted that too. Soon after this I found a simple way of incorporating a share button for whatsapp too.
The bare-bones code to add these four share buttons, so that they work across all platforms, is as follows:
For a facebook share:
<a href="https://www.facebook.com/sharer.php?u=[the url of the page you want to share goes here]"></a>
For a twitter share:
<a href="https://twitter.com/share?url=[the url of the page you want to share goes here]"></a>
For an email share:
<a href="mailto:?[the url of the page you want to share in the email goes here]"></a>
To share via whatsapp
<a href="https://wa.me/?[the url of the page you want to share in the whatsapp message goes here]"></a>
The site I found left the anchor tag textless and just styled it with an icon for each share.
In my case I chose to add the text "Share", "Tweet", "Email" and "WhatsApp" to the anchors just so it will be a bit more informative to the person browsing what the button does. It seems there are many webpages out there that have both share and follow social media anchor tags on their pages - but no instructions to the person browsing which anchors do which! In recent discussions about this I've found that this leaves tentative users (usually over 45 years of age) to ignore them out of fear. And leaves confident users to leave them alone because they don't have time to go through the irritation of not knowing wheather the anchor in question will take them to the social site in question or wheather it will give them the opportunity to share the page they are on. I concluded each scenario is a potentially wasted opportunity so designed the share buttons to be more instructive.
In the interests of being instructive (particularly for the tentative user) I also designed the anchor tags to behave like anchor tags. That is they behave differntly in the hover state than the resting state.
Furthermore, because I incorporated image-based icons in the anchor tags I was legitamately able to use the title property, which in best practice is reserved for images, within the anchor tag. This way fool proof instructions about the intention behind connecting with the ahcor could be relayed.
Finally, in order to do what I could to keep the person engaged with the site I added the 'target="_blank"' property to the anchors. So the code might not generate pop up behaviour, but atleast engaging in the share would lead to a new window being opened rather than being taken away from the site completely.
By the time I'd incorporated all this instruction via code, the facebook share button code, for the index page of the site I work on, looked like this:
<div class = "fb" >
<div class = "fb-share-box-image">
<a href="https://www.facebook.com/sharer.php?u=https://www.superspreads.co.uk/"
target="_blank" title = "Share this page on Facebook or in Messenger" >
<div class = "fb-share-box-text">
Share
</div>
</a>
</div>
</div>
And the styles for it were as follows:
.fb{
height:21px;
width:78px;
float:left;
margin-right:8px;
border:0px solid red;
border-radius: .25em;
background-color:#8b7462
}
.fb-share-box-image a{
display:inline;
float:left;
background-image: url(facebook-and-messenger-share_match_anchor_5.png);
background-repeat:no-repeat;
height:19px;
width:73px;
padding-top:3px;
padding-left:5px;
font-size:70%;
font-weight:bold;
border:0px solid red;
color:#d9c8ba;
}
.fb-share-box-image a:hover{
display:inline;
float:left;
background-image: url(facebook-and-messenger-share_match_hover_3.png);
background-repeat:no-repeat;
height:19px;
width:73px;
padding-top:3px;
padding-left:5px;
border:0px solid red;
font-size:70%;
font-weight:bold;
color:#e6e0e0;
}
.fb-share-box-text{
display:inline;
float:right;
height:19px;
margin-top:1px;
width:38px;
border:0px solid blue;
}
As you look at the live share button here www.superspreads.co.uk
The "fb" class formed the perimeter of the whole brown shaped button.
The "fb-share-box-image" class is what adjusted the look of the anchor image and text according to resting and hover states.
The "fb-share-box-text" class confirmed the position of the anchor text within the image.
You will notice each of the classes contain 0px solid borders. Switching these to 1px solid was very useful when it came to seeing how everything was fitting together.
If you view the html source code of the index page you will notice that as well as parsing the url for the page to be shared, additional text is being parsed also. In the case of:
1...The Twitter share... This is to accomodate the twitter card generated by sharing the page. The card itself is determined by the information contained in the twitter meta tags situated in the header section of the page.
2...The Email share.... This addtional text is added so that the subject and body fields of the email are pre-populated. This is just a suggestion and can be altered by the user but a tentative user may find this pre-population useful.
3...The WhatsApp share.... This addtional text is added so that the message content is pre-populated. Again this is just a suggestion and can be altered by the user but a tentative user may find this pre-population useful.
4...The Facebook share.... No additional text is required because the facebook meta tags (situated in the header section of the page) contain all the detail to be parsed.
The text to be parsed on each of the web sites pages twitter share was individually typed to match the meta data contained in the pages twitter:title tag.
I hope this thread is now of use to budding social media coders
|
|
|
|
|
احتاج الى اكواد صفحه ويب جاهزة بلغة htmlو css
Google translate: I need ready-made web page codes in html and css
|
|
|
|
|
Two things;
1) This is an English language site, and we can only accept and answer questions in that language.
I have run this through Google Translate to produce a probably-good version, but you should check it and make sure it does say what you are actually asking.
2) While we are more than willing to help those that are stuck, that doesn't mean that we are here to do it all for you! We can't do all the work, you are either getting paid for this, or it's part of your grades and it wouldn't be at all fair for us to do it all for you.
So we need you to do the work, and we will help you when you get stuck. That doesn't mean we will give you a step by step solution you can hand in!
Start by explaining where you are at the moment, and what the next step in the process is. Then tell us what you have tried to get that next step working, and what happened when you did.
If you are having problems getting started at all, then this may help: How to Write Code to Solve a Problem, A Beginner's Guide[^]
"I have no idea what I did, but I'm taking full credit for it." - ThisOldTony
"Common sense is so rare these days, it should be classified as a super power" - Random T-shirt
AntiTwitter: @DalekDave is now a follower!
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
