SharePoint online show or hide columns multiple fields required with same functionality - sharepoint-online

Question

I'm working on the SharePoint online form with show or hide columns with the below code. it is working well but not able to combine three codes together and on the edit item form by default all the fields are getting hide even though as per the code it should show the fields based on selected dropdown value. if we change the values in the edit form again the show values are working fine.
along with this code i want the make all the visible fields are mandate fields with, any assistance would be really appreciated.
<script src="/sites/XXXXXX/XXXXXXXX/SiteAssets/jquery-1.7.2.min%20-%20Show%20or%20Hide.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function () {
$('nobr:contains("Person1")').closest('tr').hide();
$('nobr:contains("Person2")').closest('tr').hide();
$('nobr:contains("Dropdown")').closest('tr').hide();
$('nobr:contains("Dropdown1")').closest('tr').hide();
$('nobr:contains("Text")').closest('tr').hide();
$('nobr:contains("Dropdown2")').closest('tr').hide();
$('nobr:contains("Date column")').closest('tr').hide();
$('nobr:contains("Number filed")').closest('tr').hide();
$('nobr:contains("Dropdown3")').closest('tr').hide();
$('nobr:contains("Remarks")').closest('tr').hide();
$('nobr:contains("Dropdown4")').closest('tr').hide();
$('nobr:contains("number2)")').closest('tr').hide();
$('nobr:contains("Dropdown5")').closest('tr').hide();
$('nobr:contains("Dropdown6")').closest('tr').hide();
$("select[title='Status Required Field']").change(function () {
console.log("selection changed", $("[title='Status Required Field'] option:selected").text());
alert($("[title='Status Required Field'] option:selected").text());
if ($("[title='Status Required Field'] option:selected").text() != "submitted") {
$('nobr:contains("Person1")').closest('tr').hide();
$('nobr:contains("Person2")').closest('tr').hide();
$('nobr:contains("Dropdown")').closest('tr').hide();
$('nobr:contains("Dropdown1")').closest('tr').hide();
$('nobr:contains("Text")').closest('tr').hide();
$('nobr:contains("Dropdown2")').closest('tr').hide();
$('nobr:contains("Date column")').closest('tr').hide();
$('nobr:contains("Number filed")').closest('tr').hide();
$('nobr:contains("Dropdown3")').closest('tr').hide();
$('nobr:contains("Remarks")').closest('tr').hide();
$('nobr:contains("Dropdown4")').closest('tr').hide();
$('nobr:contains("number2")').closest('tr').hide();
$('nobr:contains("Dropdown5")').closest('tr').hide();
$('nobr:contains("Dropdown6")').closest('tr').hide();
}
else {
$('nobr:contains("Person1")').closest('tr').show();
$('nobr:contains("Person2")').closest('tr').show();
$('nobr:contains("Dropdown")').closest('tr').show();
$('nobr:contains("Dropdown1")').closest('tr').show();
$('nobr:contains("Text")').closest('tr').show();
$('nobr:contains("Dropdown2")').closest('tr').show();
$('nobr:contains("Date column")').closest('tr').show();
$('nobr:contains("Number filed")').closest('tr').show();
$('nobr:contains("Dropdown3")').closest('tr').show();
$('nobr:contains("Remarks")').closest('tr').show();
$('nobr:contains("Dropdown4")').closest('tr').show();
}
});
});
</script>
<script src="/sites/XXXXXX/XXXXXXXX/SiteAssets/jquery-1.7.2.min%20-%20Show%20or%20Hide.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function () {
$('nobr:contains("number2")').closest('tr').hide();
$('nobr:contains("Dropdown5")').closest('tr').hide();
$('nobr:contains("Dropdown6")').closest('tr').hide();
$("select[title='Dropdown4']").change(function () {
console.log("selection changed", $("[title='Dropdown4'] option:selected").text());
alert($("[title='Dropdown4'] option:selected").text());
if ($("[title='Dropdown4'] option:selected").text() != "Active") {
$('nobr:contains("number2")').closest('tr').hide();
$('nobr:contains("Dropdown5")').closest('tr').hide();
$('nobr:contains("Dropdown6")').closest('tr').hide();
}
else {
$('nobr:contains("number2")').closest('tr').show();
$('nobr:contains("Dropdown5")').closest('tr').show();
}
});
});
</script>
<script src="/sites/XXXXXX/XXXXXXXX/SiteAssets/jquery-1.7.2.min%20-%20Show%20or%20Hide.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function () {
$('nobr:contains("Dropdown6")').closest('tr').hide();
$("select[title='Dropdown5").change(function () {
console.log("selection changed", $("[title='Dropdown5'] option:selected").text());
alert($("[title='Dropdown5'] option:selected").text());
if ($("[title='Dropdown5'] option:selected").text() != "Yes") {
$('nobr:contains("Dropdown6")').closest('tr').hide();
}
else {
$('nobr:contains("Dropdown6")').closest('tr').show();
}
});
});
</script>```

Answer 1

As far as fields hidden on Edit form your document ready function is hiding the fields. There are alot of ways to get the form state. You can simply check location contains New ,Display or Edit form and hide your fields accordingly.
var isNewMode = document.location.pathname.indexOf("/NewForm.aspx") > -1;
var isDisplayMode = document.location.pathname.indexOf("/DispForm.aspx") > -1;
var isEditMode = document.location.pathname.indexOf("/EditForm.aspx") > -1;
if(isNewMode)
{
alert("New");
}
if(isDisplayMode)
{
alert("Display");
}
if( isEditMode)
{
alert("Edit");
}
You can use PreSaveAction() function to do your custom validation. This function is executed once you click on the submit button. return true to submit the form or else return false to stay in the same page.
For Validation Add the code as follows:
function PreSaveAction(){
if($('nobr:contains("someid")').val() == ''){
alert('Required field'); // some custom validation
return false;
}else{
return true;
}
}