We Keep Coding

select option with additional form: hide unwanted input fields and show the wanted ones as required

Below is part of my code. Idea is you pick one option and it's input fields are marked as required, while options that are not picked are hidden.
I would like the displayed additional input field to be marked by the js script as "required", like input fields in --MAIN FORM--
I suppose it needs only one additional line of code added to script, but no idea how to do it. I am just a beginner. I believe it needs additional line like this one: $("."+formClass).slideDown('medium'); with pointing to all displayed inputs and .attr('required', true); but I've no idea how to do it. Any help will be appreciated :-)
Thanks and have a nice Sunday
Here's part of html code and js code:
$('#productType').on('change', function() {
var formClass = $(this).val();
$(".op").hide();
$("." + formClass).slideDown('medium');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--MAIN FORM-->
<form id="product_form" action="php/add.php" method="POST">
<label for="sku">SKU</label>
<input type="text" id="sku" name="sku" required><br>
<label for="name">Name</label>
<input type="text" id="name" name="name" required><br>
<label for="price">Price ($)</label>
<input type="number" id="price" name="price" required><br>
<label for="productType" id="switcher">Product type</label>
<select name="productType" id="productType" required>
<option value="" selected disabled>Product type</option>
<option id="dvd" value="dvd">DVD</option>
<option id="book" value="book">Book</option>
<option id="furniture" value="furniture">Furniture</option>
</select>
<!--ADDITIONAL FORM DEPENDING ON SELECT OPTION-->
<div class="additional-form dvd op" id="dvd-form">
<p>Please provide size in MB</p>
<label for="size">Size (MB)</label>
<input type="number" id="size" name="size">
</div>
<div class="additional-form book op" id="book-form">
<p>Please provide weight in KG</p>
<label for="weight">Weight (KG)</label>
<input type="number" id="weight" name="weight">
</div>
<div class="additional-form op furniture" id="furniture-form">
<p>Please provide dimensions in CM</p>
<label for="height">Height (CM)</label>
<input type="number" id="height" name="height"><br>
<label for="width">Width (CM)</label>
<input type="number" id="width" name="width"><br>
<label for="length">Length (CM)</label>
<input type="number" id="length" name="length">
</div>
</form>

Remove the required attribute from all the inputs inside the elements being hidden, and add it to the ones being shown with .slideDown().
$('#productType').on('change', function() {
var formClass = $(this).val();
$(".op").hide().find(':input').removeAttr('required');
$("." + formClass).slideDown('medium').find(':input').attr('required', true);;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--MAIN FORM-->
<form id="product_form" action="php/add.php" method="POST">
<label for="sku">SKU</label>
<input type="text" id="sku" name="sku" required><br>
<label for="name">Name</label>
<input type="text" id="name" name="name" required><br>
<label for="price">Price ($)</label>
<input type="number" id="price" name="price" required><br>
<label for="productType" id="switcher">Product type</label>
<select name="productType" id="productType" required>
<option value="" selected disabled>Product type</option>
<option id="dvd" value="dvd">DVD</option>
<option id="book" value="book">Book</option>
<option id="furniture" value="furniture">Furniture</option>
</select>
<!--ADDITIONAL FORM DEPENDING ON SELECT OPTION-->
<div class="additional-form dvd op" id="dvd-form">
<p>Please provide size in MB</p>
<label for="size">Size (MB)</label>
<input type="number" id="size" name="size">
</div>
<div class="additional-form book op" id="book-form">
<p>Please provide weight in KG</p>
<label for="weight">Weight (KG)</label>
<input type="number" id="weight" name="weight">
</div>
<div class="additional-form op furniture" id="furniture-form">
<p>Please provide dimensions in CM</p>
<label for="height">Height (CM)</label>
<input type="number" id="height" name="height"><br>
<label for="width">Width (CM)</label>
<input type="number" id="width" name="width"><br>
<label for="length">Length (CM)</label>
<input type="number" id="length" name="length">
</div>
</form>

How can I use a Javascript variable for a form action tag?

I have A sign-up form with a dropdown list and a script where I get the value of the selected option, I want to know if there is any way I can use the var selectedValue in the form action tag.
function getSelectValue(){
//var that i want to use in the form action tag
var selectedValue = document.getElementById("User_type").value;
console.log(selectedValue);
}
<!--Sign-up form-->
<form class="modal-content animate" action="I WANT THE JS VAR HERE" on method = "POST">
<div class="Logo">
<h1>Logo</h1>
</div>
<div class="container-fluid">
<div class="Name_field">
<input type="text" placeholder="Enter First Name" name="first" required>
</div>
<div class="Username_field">
<input type="text" placeholder="Enter Username/E-mail" name="username" required>
</div>
<div class="Password_field">
<input type="password" placeholder="Enter Password" name="pwd" required>
</div>
<div class="ConfirmPassword_field">
<input type="password" placeholder="Confirm Password" name="pwd2" required>
</div>
<select id="User_type" name="User_type" onchange="getSelectValue();">
<option value="0">Choose User</option>
<option value="signupinc.php">USER1</option>
<option value="signupinc1.php">USER2</option>
<option value="signupinc2.php">USER3</option>
<option value="signupinc3.php">USER4</option>
</select>
<div class= "Submit">
<button type="submit" name="submit">Sign-up</button>
</div>
</div>
</form>

I want to validate a form field using a red border when field is empty or wrong field is entered

I want to validate this form using red border when the field is empty or if the user entered the wrong field.
I'd also like to disable the submit button when fields are invalid.
Note that there are other fields that are not mandatory like MOBILE and EMAIL (they can be submitted later in "edit user details"). Although if the wrong email is entered, I'd like to validate it also.
<form action="" method="POST">
<input type="date" name="date" placeholder="Registration Date" /></br>
<input name="full_names" type="text" placeholder="Full names" /></br>
<input name="mobile" type="text" placeholder="Mobile" /></br>
<span>Select status </span>
<select name="status">
<option value="Paid">Paid</option>
<option value="Unpaid">Unpaid</option>
</select></br>
<span>Select Chapter </span>
<select name="chapter">
<option value="Known">Known</option>
<option value="Unknown">Unknown</option>
</select></br>
<span>Select Gender </span>
<select name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></br>
<input type="text" name="email" placeholder="Email Address" /></br>
<textarea type="text" placeholder="Any Remarks" rows="2" name="remarks"></textarea></br>
<button type="submit">Submit </button>
</form>

HTML5 has a lot of this built in, with required attributes and the ability to provide a regex pattern attribute to validate against. Some is even built in, like when you use type="email" attribute instead of type="text".
Using HTML5 validation + CSS3, you can pick up on the :invalid state and apply styles to the elements in that state.
Although this does not apply the disabled state to the submit button, it does not submit the form if validation fails.
input,
textarea {
margin: 5px 0;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input:invalid,
select:invalid,
textarea:invalid {
border-color: red;
}
<form action="" method="POST">
<input type="date" name="date" placeholder="Registration Date" required />
<br/>
<input name="full_names" type="text" placeholder="Full names" required />
<br/>
<input name="mobile" type="tel" pattern='[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}' placeholder="Mobile" title="+99(99)9999-9999" />
<!-- Pattern from: http://www.htmlgoodies.com/html5/tutorials/whats-new-in-html5-forms-email-url-and-telephone-input-types.html#fbid=UQp7PiVwsX2 -->
<br/>
<span>Select status </span>
<select name="status" required>
<option value="Paid">Paid</option>
<option value="Unpaid">Unpaid</option>
</select>
<br/>
<span>Select Chapter </span>
<select name="chapter" required>
<option value="Known">Known</option>
<option value="Unknown">Unknown</option>
</select>
<br/>
<span>Select Gender </span>
<select name="gender" required>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<br/>
<input type="email" name="email" placeholder="Email Address" />
<br/>
<textarea type="text" placeholder="Any Remarks" rows="2" name="remarks" required></textarea>
<br/>
<button type="submit">Submit</button>
</form>

javascript Form Submitting location

After the user submits a form, how do I make it so that the user will get a form back on their browser?
I know I need to use location.search
<form id="survey" name="survey">
First Name
<input type="text" id="first" name="first" required/><br><br>
Last Name
<input type="text" id="last" name ="last" required /><br><br>
# of Attendees
<input type="number" id="attend" name="attend" required /><br><br>
Email Address
<input type="email" id="email" name="email" required /><br><br>
Time of Arrival
<input type="text" id="time" name="time" required /> <br><br>
Spend the Night
<select id="night" name="night">
<option value=" "> </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<input type="submit" onclick="enter()"/>
</form>

jquery validation doesn't respond

<form class="admission" name="form" method="POST" action="#" enctype="multipart/form-data" id="new_student">
<h2> Student Details </h2>
<p>Fields marked with <span class="necessary-field">*</span> must be filled.</p>
<label>Admission number
<span class="small">Add your name</span>
</label>
<input type="text" name="Admission_number" id="Admission_number"/><br/>
<label>Admission Date
<span class="small">Add your name</span>
</label>
<input type="text" name="Admission_Date" id="Admission_Date" /><br/>
<h2>Personal Details</h2><p></p>
<label>First Name</label>
<input type="text" name="first_name" id="first_name" /><br/>
<label>Middle Name</label>
<input type="text" name="middle_name" id="middle_name" /><br/>
<label>Last Name
<span class="small">Last name or Surname</span>
</label>
<input type="text" name="last_name" id="last_name" /><br/>
<label>Course </label>
<select id="student_batch_id" name="student_batch_id">
<option value="11">10 - 2010 A</option>
<option value="14">LKG</option>
</select><br/>
<label>Date of Birth</label>
<input type="text" name="dob" id="dob"/><br/>
<label>Gender</label>
<select id="gender" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<label>Blood Group</label>
<select id="student_blood_group" name="student_blood_group"><option value="">Unknown</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option></select>
<label>Identification Marks</label>
<input type="text" name="id_mark_1" id="id_mark_1" /><br/>
<label> </label>
<input type="text" name="id_mark_2" id="id_mark_2" /><br/>
<label>Place of Birth</label>
<input type="text" name="birth_palace" id="birth_palace" /><br/>
<label>Nationality</label>
<input type="text" name="nationalaity" id="nationalaity" /><br/>
<label>Mother Tongue</label>
<input type="text" name="mother_tongue" id="mother_tongue" /><br/>
<label>Religion</label>
<input type="text" name="religion" id="religion" /><br/>
<label>Cast</label>
<input type="text" name="cast" id="cast" /><br/>
<label>Creed</label>
<input type="text" name="creed" id="creed" /><br/>
<label>category</label>
<select id="student_category_id" name="category_id]">
<option value="">Select a Category</option>
<option value="1">GENERAL</option>
<option value="2">SC/ST</option>
<option value="3">OBC</option>
<option value="4">OEC</option>
<option value="5">NRI</option>
</select><br/>
<h2>Contact Details</h2><p></p>
<label>Address Line1</label>
<input type="text" name="address_line1" id="address_line1" /><br/>
<label>Address Line2</label>
<input type="text" name="address_line2" id="address_line2" /><br/>
<label>Locality</label>
<input type="text" name="locality" id="locality" /><br/>
<label>City</label>
<input type="text" name="city" id="city" /><br/>
<label>State</label>
<input type="text" name="state" id="state" /><br/>
<label>PIN</label>
<input type="text" name="pin_num" id="pin_num" /><br/>
<label>Telephone</label>
<input type="text" name="telephone" id="telephone" /><br/>
<label>Mobile</label>
<input type="text" name="mobile" id="mobile" /><br/>
<label>Upload User Photo</label>
<span class="small">Upload User Photo (60KB max)</span>
<input id="student_photo" name="student_photo" type="file" >
<input type="submit" value="NEXT">
<br/>
</form>​
This form is to be validated. I include these below js files to the page.
<script src="../JavaScript/jquery.js" type="text/javascript"></script>
<script src="../JavaScript/jquery.validate.js" type="text/javascript"></script>
And add the java script code:-
<script type="text/javascript">
$(document).ready(function(){
$("#new_student").validate({
rules: {
Admission_number: {
required: true,
minlength: 2
},
Admission_Date: "required"
},
messages: {
Admission_Date: "This is a comment form. Why in the heck would you leave the comment blank?",
Admission_number: {
required: "Stand up for your comments or go home.",
minlength: jQuery.format("You need to use at least {0} characters for your name.")
}
}
});
});
</script>
I am new to jquery but. I couldnt understand where the mistake is
here is the jsFiddle link http://jsfiddle.net/abelkbil/cVjez/

It's working for me...
http://jsfiddle.net/cVjez/10/
All I did was change the jQuery version to 1.7.2 and then added the jQuery.validation.js file from the Microsoft Ajax CDN
Maybe double check that the jquery and jquery validation js libraries are being loaded... the relative path might be wrong or something along those lines.