Проблема не в вашем .attr("required", "")
, проблема в том, что ваш тип кнопки должен быть "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>