由 D3 附加时，表单验证不起作用答案

【问题标题】：Form validation not working when appended by D3由 D3 附加时，表单验证不起作用
【发布时间】：2020-05-28 23:08:32
【问题描述】：

我使用 d3 构建了一个带有单选按钮的表单，如下所示：

var rating_form = d3.select("body")
		.append('form')
		.attr('class', 'rating');

 // Appending up and down vote radio button
	var radio_groups = rating_form.append('div').attr('class', 'form-group');

	// Radio for up
	var radio_grp_chk = radio_groups
		.append('div')
		.attr('class', 'form-check form-check-inline upvote');
	radio_grp_chk
		.append('input')
		.attr('class', 'form-check-input')
		.attr('type', 'radio')
		.attr('name', 'voting-radio')
		.attr('value', 'thumbup')
		.attr("required", "");
	radio_grp_chk.append('span').text("upvote");


	// Radio for down
	var radio_grp_chk2 = radio_groups
		.append('div')
		.attr('class', 'form-check form-check-inline downvote');
	radio_grp_chk2
		.append('input')
		.attr('class', 'form-check-input')
		.attr('type', 'radio')
		.attr('name', 'voting-radio')
		.attr('value', 'thumbdown')
		.attr("required", "");
	radio_grp_chk2.append('span').text("downvote");

	// Appending text area
	rating_form
		.append('div')
		.attr('class', 'form-group')
		.append('textarea')
		.attr('class', 'form-control feedback-text')
		.attr('placeholder', 'Enter your text...');

	// Submit button
	rating_form
		.append('button')
		.attr('type', 'button')
		.attr('class', 'btn btn-primary rating-btn')
		.text('Submit!');

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        crossorigin="anonymous">
</head>

<body>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"></script>
</body>

对于input 单选按钮，我添加了.attr("required", "") 以强制在提交前选择。但是，当我不选择单选按钮并单击提交时，不会出现任何错误消息。

我该如何解决这个问题？

【问题讨论】：

标签： javascript html jquery d3.js

【解决方案1】：

问题不是你的.attr("required", "")，问题只是你的button's type应该是"submit"而不是"button"：

rating_form
    .append('button')
    .attr('type', 'submit')
    //etc...

由于"submit" 是默认类型，您也可以只删除方法.attr('type', 'button')。

这是您进行更改的代码：

var rating_form = d3.select("body")
		.append('form')
		.attr('class', 'rating');

 // Appending up and down vote radio button
	var radio_groups = rating_form.append('div').attr('class', 'form-group');

	// Radio for up
	var radio_grp_chk = radio_groups
		.append('div')
		.attr('class', 'form-check form-check-inline upvote');
	radio_grp_chk
		.append('input')
		.attr('class', 'form-check-input')
		.attr('type', 'radio')
		.attr('name', 'voting-radio')
		.attr('value', 'thumbup')
		.attr("required", "");
	radio_grp_chk.append('span').text("upvote");


	// Radio for down
	var radio_grp_chk2 = radio_groups
		.append('div')
		.attr('class', 'form-check form-check-inline downvote');
	radio_grp_chk2
		.append('input')
		.attr('class', 'form-check-input')
		.attr('type', 'radio')
		.attr('name', 'voting-radio')
		.attr('value', 'thumbdown')
		.attr("required", "");
	radio_grp_chk2.append('span').text("downvote");

	// Appending text area
	rating_form
		.append('div')
		.attr('class', 'form-group')
		.append('textarea')
		.attr('class', 'form-control feedback-text')
		.attr('placeholder', 'Enter your text...');

	// Submit button
	rating_form
		.append('button')
		.attr('type', 'submit')
		.attr('class', 'btn btn-primary rating-btn')
		.text('Submit!');

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        crossorigin="anonymous">
</head>

<body>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"></script>
</body>

【讨论】：

谢谢，它有效。但是，我不希望在单击按钮后刷新页面。 onclick 监听器将进行一些 ajax 调用以发送表单数据。有没有办法仍然保留type=button 并验证表单？
嗯，这是一个不同的问题（即使与您的问题有关），所以我建议您发布一个新问题。
@hydradon 顺便说一句，当您发布新问题时，不要使用 d3 标签（因为您看到的问题与 D3 无关），只使用 javascript、@987654333 @ 和html，这样你会吸引更多的注意力。
当然，我会先研究更多