Zu unausgefülltem Formularfeld scrollen

Gesamtes Formular prüfen mit Ausnahme bestimmter Felder

Dieses Script prüft alle input-Felder der Seite auf Vollständigkeit, ausgenommen der Felder, welche in companionFields angegeben worden sind. Wenn eines der Felder unvollständig ist und auf den Absenden Button geklickt wird, wird zu diesem Feld hochgescrollt.

// confirmButton ist die Klasse des Buttons zum Absenden des Formulars
$( '.confirmButton' ).on( 'click', function()
{
  if( isComplete() )
  {
  	//Wenn alle Eingaben vollständig sind, zu dieser Seite weiterleiten
    window.location.href = '/bestaetigung-der-anmeldung.html';
  }
});

function isComplete()
  {
  	// name-Attribut der Felder, welche nicht auf Vollständigkeit geprüft werden sollen
	let companionFields = [ 'anrede_begleit', 'vorname_begleit', 'name_begleit',
	'messeticket_begleit', 'independentparty_begleit', 'independentpartyshuttle_begleit',
	'barrierefrei_begleit' ];
  
    let complete = true;

	//prüft alle input Felder außer mit type="hidden"
    $( 'input' ).not( ':hidden' ).each( function()
    {
      let $element = $( this );
      let name = $element.prop( 'name' );
      let type = $element.prop( 'type' );

      //Wenn es sich um ein Begleitpersonenfeld handelt, Iteration überspringen
      var index = companionFields.findIndex( ( fieldName ) =>
      { return name.startsWith( fieldName ); }, name );

      if( index != -1 )
      {
        return true;
      }

      switch( type )
      {
        case 'radio':
          let $radios = $( 'input[name="' + name + '"]' );
          complete = $radios.is( ':checked' );
          break;
        case 'checkbox':
          complete = $element.prop( 'checked' );
          break
        case 'text':
        default:
          complete = $element.val().trim();
          break
      }

      //Zum unvollständigen Element scrollen und dann die Ausführung von each beenden
      if( !complete )
      {
        $( 'html, body' ).animate(
        {
          scrollTop: $element.offset().top - 30
        }, 500 );

        return false;
      }

    });

    return complete;
  }

Für ein einzelnes Element

Dieses Script ist für ein einzelnes Element - in diesem Fall eine Checkbox, welche im Formular leicht übersehen wird, aber zwingend angehakt sein muss.

Wenn die Checkbox nicht angehakt wurde und auf den Absenden Button des Formulars geklickt wird, wird zu dieser hoch gescrollt.

<script type="application/javascript">

	//ctrl_627 ist die ID des Submitbuttons
	$( '#ctrl_627' ).on( 'click', function()
	{
		//opt_616_0 ist die ID der Checkbox, welche angehakt sein muss
		let $checkbox = $( '#opt_616_0' );
		
		if( !$checkbox.prop( 'checked' ) )
		{
			 $( 'html, body' ).animate({
			 		//allgemeineheadline ist die Überschrift über der 
			 		//Checkbox, zu welcher gescrollt wird, wenn diese
			 		//nicht angehakt worden ist
                    scrollTop: $( '#allgemeineheadline' ).offset().top
                    
                //1000 = Scrollgeschwindigkeit in Millisekunden
                }, 1000);
		}
	});
</script>